问题
I'm trying to import https://github.com/johndatserakis/vue-navigation-bar into my Gridsome project but I receive the error:
'Module not found: Error: Empty Dependency (no request.)'
I've tried changing the way I import the component with no luck. I've also tried yarn install in case there was anything missing.
<template>
<vue-navigation-bar :options="navbarOptions" />
</template>
<script>
export default {
name: 'VueNavBar',
components: {
VueNavBar: () => import('vue-navigation-bar'),
data () {
return {
navbarOptions: {
elementId: 'main-navbar',
isUsingVueRouter: true,
mobileBreakpoint: 992,
brandImagePath: './',
brandImage: require(''),
brandImageAltText: 'brand-image',
collapseButtonImageOpen: require(''),
collapseButtonImageClose: require(''),
showBrandImageInMobilePopup: false,
ariaLabelMainNav: 'Main Navigation',
menuOptionsLeft: [
{
type: 'link',
text: 'Why Dunder Mifflin',
iconLeft: '',
subMenuOptions: [
{
type: 'link',
text: 'About',
subText: 'Stupid corporate wet blankets. Like booze ever killed anyone.',
path: './about',
iconLeft: '<svg id="i-info" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> <path d="M16 14 L16 23 M16 8 L16 10" /> <circle cx="16" cy="16" r="14" /> </svg>',
},
{
type: 'hr',
},
{
type: 'link',
text: 'Locations',
subText: 'You\'re a presentation tool!',
path: './locations',
},
{
type: 'hr',
},
{
type: 'link',
text: 'Blog',
subText: 'I enjoy having breakfast in bed. I like waking up to the smell of bacon. Sue me.',
path: './blog',
},
]
},
{
type: 'link',
text: 'Contact',
subMenuOptions: [
{
type: 'link',
text: 'Customer Service',
path: './customer-service'
},
{
type: 'link',
text: 'Accounting',
path: './accounting',
},
{
type: 'hr',
},
{
type: 'link',
text: 'Reception',
path: './reception',
iconLeft: '<svg id="i-telephone" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> <path d="M3 12 C3 5 10 5 16 5 22 5 29 5 29 12 29 20 22 11 22 11 L10 11 C10 11 3 20 3 12 Z M11 14 C11 14 6 19 6 28 L26 28 C26 19 21 14 21 14 L11 14 Z" /> <circle cx="16" cy="21" r="4" /> </svg>',
},
]
},
{
type: 'link',
text: 'Pricing',
path: './pricing',
iconRight: '<i class="fa fa-long-arrow-right fa-fw"></i>',
},
],
menuOptionsRight: [
{
type: 'button',
text: 'Signup',
path: './signup',
class: 'button-red',
iconLeft: '<svg id="i-star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="currentcolor" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> <path d="M16 2 L20 12 30 12 22 19 25 30 16 23 7 30 10 19 2 12 12 12 Z" /> </svg>'
},
{
type: 'button',
text: 'Login',
path: './login',
iconRight: '<svg id="i-arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> <path d="M22 6 L30 16 22 26 M30 16 L2 16" /> </svg>'
}
]
}
}
}
}}
</script>
I expect to see a nav bar.
回答1:
Try out before export default import the navbar
import VueNavBar from 'vue-navigation-bar'
Vue.component('vue-navigation-bar', VueNavBar)
回答2:
I'm the developer of the component and I'd like to help you get it installed correctly.
Like @Sabee said, you need to import the component before the beginning of the export default {} object.
I've actually never seen anyone use the method of importing you used in your example, and I would advise against it, as I doubt it would work with any component.
Also - you actually have a bigger issue, as the components object is not setup correctly, and is actually holding the entirety of your components code. This will not compile with any library, or even without a library. This seems more like a formatting typo.
So for now let's just work on getting the navbar to show up. Note, the way I'm showing you here installs the navbar globally, so you don't even need to use the components property on your component in this case. (We'll worry about making that not global once we get this initial hurdle crossed.)
Also, I've imported the component's css as well, right below the component import. This will make the navbar look good in your app.
So, the full example you need is below:
<template>
<vue-navigation-bar :options="navbarOptions" />
</template>
<script>
import VueNavigationBar from "vue-navigation-bar";
Vue.component("vue-navigation-bar", VueNavigationBar);
import 'vue-navigation-bar/dist/vue-navigation-bar.css'
export default {
data() {
return {
navbarOptions: {
elementId: 'main-navbar',
isUsingVueRouter: true,
mobileBreakpoint: 992,
brandImagePath: './',
brandImage: null,
brandImageAltText: 'brand-image',
collapseButtonImageOpen: null,
collapseButtonImageClose: null,
showBrandImageInMobilePopup: true,
ariaLabelMainNav: 'Main Navigation',
tooltipAnimationType: 'shift-away',
menuOptionsLeft: [{
type: 'link',
text: 'Why Dunder Mifflin',
subMenuOptions: [
{
isLinkAction: true,
type: "link",
text: "About",
subText:
"Stupid corporate wet blankets. Like booze ever killed anyone.",
path: "./about",
iconLeft: '<i class="fa fa-star fa-fw"></i>'
},
{
type: 'hr',
},
{
type: 'link',
text: 'Locations',
subText: 'You\'re a presentation tool!',
path: './locations',
},
{
type: 'hr',
},
{
type: 'link',
text: 'Blog',
subText: 'I enjoy having breakfast in bed. I like waking up to the smell of bacon. Sue me.',
path: './blog',
},
]
},
{
type: 'link',
text: 'Contact',
subMenuOptions: [{
type: 'link',
text: 'Customer Service',
path: './customer-service'
},
{
type: 'link',
text: 'Accounting',
path: './accounting',
},
{
type: 'hr',
},
{
type: 'link',
text: 'Reception',
path: './reception',
iconLeft: '<svg id="i-telephone" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> <path d="M3 12 C3 5 10 5 16 5 22 5 29 5 29 12 29 20 22 11 22 11 L10 11 C10 11 3 20 3 12 Z M11 14 C11 14 6 19 6 28 L26 28 C26 19 21 14 21 14 L11 14 Z" /> <circle cx="16" cy="21" r="4" /> </svg>',
},
]
},
{
type: 'link',
text: 'Pricing',
path: './pricing',
iconRight: '<i class="fa fa-long-arrow-right fa-fw"></i>',
},
],
menuOptionsRight: [{
type: 'button',
text: 'Signup',
path: './signup',
class: 'button-red'
},
{
type: 'button',
text: 'Login',
path: './login',
iconRight: '<svg id="i-arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> <path d="M22 6 L30 16 22 26 M30 16 L2 16" /> </svg>'
}
]
}
}
}
}
</script>
回答3:
Tested and working gridsome solution (explained here)
components/NavigationBar.vue:
<template>
<ClientOnly>
<!-- We need ClientOnly tag because vue-navigation-bar doesn't support SSR -->
<vue-navigation-bar :options="navbarOptions" />
</ClientOnly>
</template>
<script>
import VueNavigationBar from "vue-navigation-bar";
//Vue.component("vue-navigation-bar", VueNavigationBar);
//We don't need to create vue component here
import 'vue-navigation-bar/dist/vue-navigation-bar.css'
export default {
data() {
return {
navbarOptions: {
elementId: 'main-navbar',
isUsingVueRouter: true,
mobileBreakpoint: 992,
brandImagePath: './',
brandImage: null,
brandImageAltText: 'brand-image',
collapseButtonImageOpen: null,
collapseButtonImageClose: null,
showBrandImageInMobilePopup: true,
ariaLabelMainNav: 'Main Navigation',
tooltipAnimationType: 'shift-away',
menuOptionsLeft: [{
type: 'link',
text: 'Why Dunder Mifflin',
subMenuOptions: [
{
isLinkAction: true,
type: "link",
text: "About",
subText:
"Stupid corporate wet blankets. Like booze ever killed anyone.",
path: "./about",
iconLeft: '<i class="fa fa-star fa-fw"></i>'
},
{
type: 'hr',
},
{
type: 'link',
text: 'Locations',
subText: 'You\'re a presentation tool!',
path: './locations',
},
{
type: 'hr',
},
{
type: 'link',
text: 'Blog',
subText: 'I enjoy having breakfast in bed. I like waking up to the smell of bacon. Sue me.',
path: './blog',
},
]
},
{
type: 'link',
text: 'Contact',
subMenuOptions: [{
type: 'link',
text: 'Customer Service',
path: './customer-service'
},
{
type: 'link',
text: 'Accounting',
path: './accounting',
},
{
type: 'hr',
},
{
type: 'link',
text: 'Reception',
path: './reception',
iconLeft: '<svg id="i-telephone" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> <path d="M3 12 C3 5 10 5 16 5 22 5 29 5 29 12 29 20 22 11 22 11 L10 11 C10 11 3 20 3 12 Z M11 14 C11 14 6 19 6 28 L26 28 C26 19 21 14 21 14 L11 14 Z" /> <circle cx="16" cy="21" r="4" /> </svg>',
},
]
},
{
type: 'link',
text: 'Pricing',
path: './pricing',
iconRight: '<i class="fa fa-long-arrow-right fa-fw"></i>',
},
],
menuOptionsRight: [{
type: 'button',
text: 'Signup',
path: './signup',
class: 'button-red'
},
{
type: 'button',
text: 'Login',
path: './login',
iconRight: '<svg id="i-arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" fill="none" stroke="currentcolor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"> <path d="M22 6 L30 16 22 26 M30 16 L2 16" /> </svg>'
}
]
}
}
},
components:{
VueNavigationBar
}
}
</script>
You need to import and export this component in the file where you are using <NavigationBar /> (i.e. Default.vue or Header.vue):
<template>
<NavigationBar />
<!--- another code -->
</header>
</template>
<script>
import NavigationBar from "@/components/NavigationBar.vue";
export default {
components: {
NavigationBar
}
}
</script>
来源：https://stackoverflow.com/questions/57061222/import-vue-navigation-bar-in-gridsome