Tring to Import Vue into the Vue router

Question

Can I write the 'import {vue} from 'vue' in the vue router file

import home from '../components/home.vue'
import  {vue} from 'vue'
import VueMeta from 'vue-meta'
vue.use(VueMeta , {
  keyName: 'metaInfo',
  attribute: 'data-vue-meta',
  ssrAttribute: 'data-vue-meta-server-rendered',
  tagIDKeyName: 'vmid',
  refreshOnceOnNavigation: true
})
const router = createRouter({
  history: createWebHistory(),
  routes: 
    {
      path: '/',
      name: 'home',
      component: home
    },
    {
      path: '/business',
      name: 'business',
      component: () => import('../components/business.vue')
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../components/about.vue')
    },
    {
      path: '/faqs',
      name: 'faq',
      component: () => import('../components/faq.vue')
    },
    {
      path: '/termOfServices',
      name: 'termOfServices',
      component: () => import('../components/termOfServices.vue')
    }
  ],
  scrollBehavior(to, from, savedPosition) {
    if (to.hash) {
      return {
        el: to.hash,
        behavior: 'smooth'
      }
    }
    if (savedPosition) {
      return savedPosition
    } else {
      return {top: 0}
    }
  
    
  }
})

export default router

Just wondering because When I run this i get the error 'Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/vue.js?v=5d26be8a' does not provide an export named 'default'' I want to use the vue-meta library for seo of the site and from the docs i have to import vue in the router page before I can do that use vue-meta

Answer 1

Try this approach :

import Vue from 'vue'
import VueMeta from 'vue-meta'

Vue.use(VueMeta, {
  keyName: 'metaInfo',
  attribute: 'data-vue-meta',
  ssrAttribute: 'data-vue-meta-server-rendered',
  tagIDKeyName: 'vmid',
  refreshOnceOnNavigation: true
})

For the last version of Vue3, try to use :

import { createApp } from 'vue'
import App from './App.vue'

import VueMeta from 'vue-meta'

const app = createApp(App)
app.use(VueMeta, {
  keyName: 'metaInfo',
  attribute: 'data-vue-meta',
  ssrAttribute: 'data-vue-meta-server-rendered',
  tagIDKeyName: 'vmid',
  refreshOnceOnNavigation: true
}))