Can´t import route link component in Vue

Question

I try to create routes with vue router. The App.js code looks

JS

 require("./bootstrap");

    import Swal from "sweetalert2";
    import VueI18n from 'vue-i18n'
    import VueRouter from 'vue-router'

    import Vuetify from "vuetify";
    import es from "vuetify/es5/locale/es";
    import en from "vuetify/es5/locale/en";
    import "@mdi/font/css/materialdesignicons.css";

    import ContadorComponent from "./components/ContenedorComponent.vue";
    import GatewayComponent from "./components/GatewayComponent.vue";

    const routes = [{
            path: '/contador',
            component: ContadorComponent
        },
        {
            path: '/gateway',
            component: GatewayComponent
        }
    ]

    window.Vue = require("vue");
    Vue.use(Vuetify, VueRouter, VueI18n, Swal);

    Vue.component(
        "drawer-component",
        require("./components/DrawerComponent.vue").default,
        /*  methods: {
              changeLocale (lang) {
                this.$vuetify.lang.current = lang
              },
        },*/
    );

    export default new Vuetify({
        icons: {
            iconfont: "mdi"
        },
        lang: {
            locales: {
                es,
                en
            },
            current: "es"
        }
    });

    const router = new VueRouter({
        routes
    })

    new Vue({
        vuetify: new Vuetify(),
        router,
    }).$mount("#app");

VUE (Vuetify)

<template>
  <v-app id="app">
    <v-navigation-drawer v-model="drawer" app permanent expand-on-hover>
      <v-list dense>
        <v-list-item link>
          <v-list-item-action>
            <v-icon>mdi-home</v-icon>
          </v-list-item-action>
          <v-list-item-content>
            <v-list-item-title>Principal</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
        <v-list-group prepend-icon="mdi-directions-fork">
          <template v-slot:activator>
            <v-list-item-title>Gateways</v-list-item-title>
          </template>
          <v-list-item link>
            <v-list-item-icon>
              <v-icon>mdi-format-list-bulleted</v-icon>
            </v-list-item-icon>
            <v-list-item-title>Listado</v-list-item-title>
          </v-list-item>
        </v-list-group>
        <v-list-group prepend-icon="mdi-speedometer">
          <template v-slot:activator>
            <v-list-item-title>Contadores</v-list-item-title>
          </template>
          <v-list-item link>
            <v-list-item-icon>
              <v-icon>mdi-format-list-bulleted</v-icon>
            </v-list-item-icon>
            <v-list-item-title>Listado</v-list-item-title>
          </v-list-item>
        </v-list-group>
      </v-list>
    </v-navigation-drawer>

    <v-app-bar app elevate-on-scroll dark>
      <v-toolbar-title class="d-sm-flex">LoRaWAN</v-toolbar-title>
      <v-divider class="mx-4 d-sm-flex" inset vertical></v-divider>
      <v-toolbar-items class="d-sm-flex">
        <v-col class="d-flex" cols="3" sm="6">
          <v-select :items="items" label="Instalaciones" dense outlined></v-select>
        </v-col>

        <v-col class="d-flex" cols="3" sm="6">
          <v-select :items="items" label="Agrupaciones" dense outlined></v-select>
        </v-col>
      </v-toolbar-items>

      <v-spacer></v-spacer>
      <v-menu open-on-hover right bottom>
        <template v-slot:activator="{ on }">
          <v-btn icon v-on="on">
            <v-icon>mdi-account-circle</v-icon>
          </v-btn>
        </template>

        <v-list>
          <v-list-item link>
            <v-list-item-title>
              <v-icon>mdi-exit-run</v-icon>Salir
            </v-list-item-title>
          </v-list-item>
        </v-list>
      </v-menu>
    </v-app-bar>
    <v-content>
      <v-container class="fill-height" fluid>
        <v-row align="center" justify="center">
          <router-link to="/contador">Go to Contadores</router-link>|
          <router-link to="/gateway">Go to Gateway</router-link>
        </v-row>
      </v-container>
      <router-view></router-view>
    </v-content>
    <v-footer dark app>
      <span class="white--text">{{ new Date().getFullYear() }}</span>
      <span class="white--text text-right">Versión 2.0</span>
    </v-footer>
  </v-app>
</template>

<script>
export default {
  props: {
    source: String
  },
  data: () => ({
    items: ["Foo", "Bar", "Fizz", "Buzz"],
    drawer: null
  })
};
</script>

The problem: Returns Unknown custom element: router-link I import VueRouter so i don´t know what´s fails. Anybody see the error?

Answer 1

Vue.use argument is {Object | Function} plugin.

You are trying to install multiple Vue plugins at once.

---

Instead of:

Vue.use(Vuetify, VueRouter, VueI18n, Swal);

Do:

Vue.use(Vuetify);
Vue.use(VueRouter);
Vue.use(VueI18n);
Vue.use(Swal);