Импортировать Vue-Navigation-Bar в Gridsome

Попробуйте перед 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>

Протестированное и рабочее решение gridsome (объяснение здесь)

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>

Вам необходимо импортировать и экспортировать этот компонент в файл, в котором вы используете <NavigationBar /> (т.е. Default.vue или Header.vue):

<template>
     <NavigationBar />
        <!--- another code -->
    </header>
</template>

<script>
import NavigationBar from "@/components/NavigationBar.vue";

export default {  
  components: {
    NavigationBar
  }
}
</script>