Импортировать Vue-Navigation-Bar в Gridsome
Я пытаюсь импортировать https://github.com/johndatserakis/vue-navigation-bar в мой проект Gridsome, но я получаю сообщение об ошибке:
'Модуль не найден: ошибка: пустая зависимость (нет запроса.)'
Я попытался изменить способ импорта компонента без удачи. Я также попробовал установить пряжу на случай, если чего-то не хватает.
<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>
Я ожидаю увидеть навигационную панель.
1 ответ
Попробуйте раньше export default импортировать навигационную панель
import VueNavBar from 'vue-navigation-bar'
Vue.component('vue-navigation-bar', VueNavBar)
Я разработчик компонента и хотел бы помочь вам правильно установить его.
Как сказал @Sabee, вам нужно импортировать компонент до начала export default {} объект.
На самом деле я никогда не видел, чтобы кто-то использовал метод импорта, который вы использовали в своем примере, и я бы не советовал его использовать, поскольку я сомневаюсь, что он будет работать с любым компонентом.
Кроме того - у вас действительно есть более серьезная проблема, так как componentsобъект настроен неправильно и фактически содержит весь код ваших компонентов. Это не будет компилироваться с какой-либо библиотекой или даже без библиотеки. Это больше похоже на опечатку при форматировании.
Так что пока давайте просто поработаем над тем, чтобы отображалась панель навигации. Обратите внимание: способ, который я вам здесь показываю, устанавливает глобальную навигационную панель, поэтому вам даже не нужно использоватьcomponentsсвойство вашего компонента в этом случае. (Мы будем беспокоиться о том, чтобы сделать это не глобальным, как только мы преодолеем это первоначальное препятствие.)
Кроме того, я также импортировал css компонента, прямо под импортом компонента. Благодаря этому навигационная панель будет хорошо выглядеть в вашем приложении.
Итак, полный пример, который вам нужен, приведен ниже:
<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>
Протестированное и работающее сеточное решение (объяснено здесь)
компоненты /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>
Вам необходимо импортировать и экспортировать этот компонент в файл, в котором вы используете<NavigationBar /> (т.е. Default.vue или Header.vue):
<template>
<NavigationBar />
<!--- another code -->
</header>
</template>
<script>
import NavigationBar from "@/components/NavigationBar.vue";
export default {
components: {
NavigationBar
}
}
</script>