Can´t import route link component in Vue - vue.js

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);