We Keep Coding

Component Not Found (Vuetify & Vuejs)

Component not found error. In vuetify 1.5.5 and vue 2.6.12 with vue-template-compiler 2.6.12. I have tried some guys on Discord but they cant seem to figure out what might be the problem here. Sometimes it issues our=t the component not found error, sometimes it doesnt run at all even if both libraries are the same version.
App.Vue
<template> <v-app>
<v-content>
<router-view></router-view>
</v-content></v-app>
</template><script>
export default {
name: "App",
components: {},
mounted() {},
data: () => ({}),
};
</script>
<style>
</style>
So the main.js contains mostly imports from javascript and initialization of libraries and modules main.js
import Vue from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store/index";
import 'material-design-icons-iconfont/dist/material-design-icons.css';
import "./plugins/vuetify";
import 'animate.css'
import './assets/custom.css'
import './assets/table.css'
import './assets/google-like-text.css'
import VeeValidate from "vee-validate";
import VueSession from "vue-session";
import VueGoogleCharts from 'vue-google-charts';
import 'vue-orgchart/dist/style.min.css'
import Snotify from 'vue-snotify'
import 'vue-snotify/styles/material.css';
Vue.use(VeeValidate, { inject: false });
var options = {
persist: true
};
Vue.use(VueSession, options);
Vue.use(VueGoogleCharts);
Vue.use(Snotify)
Vue.config.productionTip = false;
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
And vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import 'vuetify/src/stylus/app.styl'
import 'vuetify/dist/vuetify.min.css'
import colors from "vuetify/es5/util/colors"
Vue.use(Vuetify, {
iconfont: 'md',
theme: {
primary: "#2E7D32",
secondary: colors.grey.darken1,
accent: colors.shades.black,
error: colors.red.accent3
}
})

Error in v-on handler: "ReferenceError: i18n is not defined"

I am trying to do a multi-language site with Vue.js, but I don't know how to call the const i18n or how to refer to it. I already tried the eventBus option, but I think this is not the right choice. I'm using vue-router.
Navbar.vue
<template>
<a v-on:click="changeLocale">EN</a>
</template>
<script>
export default {
methods: {
changeLocale: function() {
console.log("es");
i18n.locale = "es";
}
}
};
</script>
main.js
import VueI18n from 'vue-i18n';
import VueRouter from 'vue-router';
import App from './App.vue';
import {routes} from './routes.js';
import {messages} from './i18n.js';
Vue.use(VueRouter);
Vue.use(VueI18n);
const router = new VueRouter({
routes,
mode: 'history'
});
const i18n = new VueI18n({
locale: 'en',
messages
});
new Vue({
el: '#app',
router,
i18n,
render: h => h(App)
});
App.vue
<template>
<div>
<navbar></navbar>
<router-view></router-view>
<footer-part></footer-part>
</div>
</template>
<script>
import Navbar from './components/site/Navbar.vue';
import Footer from './components/site/Footer.vue';
export default {
components: {
'navbar' : Navbar,
'footer-part' : Footer
}
}
</script>

You should prefix it using $ sign and this keyword :
this.$i18n.locale = "es";

Getting a console error while trying to migrate a Vue App with VueRouter

I am tying to port a stand alone Vue app into a larger Java Spring web project. The Vue app has Vue router as a dependency. When I try to load the main page, I am getting a [Vue warn]: Error in render: "TypeError: Cannot read property 'to' of undefined". found in ---> <RouterLink>...<AppHeader> at src/views/AppHeader.vue error in the browser console.
The main JSP loads fine, and is using a compiled JS file.
src/main.js
import Vue from 'vue';
import AppLayout from './views/Layout.vue';
import router from './router';
import Vuetify from 'vuetify';
import vueMoment from 'vue-moment';
import VueTippy from 'vue-tippy';
new Vue({
el: '#app',
router,
render: h => h(AppLayout)
});
Vue.use(VueTippy);
Vue.use(Vuetify);
Vue.use(vueMoment);
src/views/AppLayout.vue
<template>
<div id="app">
<app-header></app-header>
<section class="main-section section">
<div class="container content">
<router-view></router-view>
</div>
</section>
<app-footer></app-footer>
</div>
</template>
<script>
import AppHeader from './AppHeader.vue';
import AppFooter from './AppFooter.vue';
export default {
components: {
'app-header': AppHeader,
'app-footer': AppFooter
}
}
</script>
src/router/index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import SearchForm from '../views/search/searchform.vue'
Vue.use(VueRouter)
const router = new VueRouter({
mode: 'history',
scrollBehavior: (to, from, savedPosition) => ({ y: 0 }),
routes: [
{ path: '/app/path/search', component: SearchForm },
{ path: '/app/path/new', component: NewReturn },
{ path: '/app/path/home', component: SearchForm },
{ path: '/', redirect: '/app/path/search' },
{ path: '*', component: NotFound }
]
})
export default router
src/views/Appheader.vue
<template>
<div>
<router-link to="/app/path" exact>Search</router-link>
</div>
</template>
It seems like router-link is not working for some reason. I can't seem to figure out how to fix this issue. Anyone know what I am missing?

You don't need an <a> tag inside the router-link, that is rendered by vue when using <router-link>
https://router.vuejs.org/api/#router-link
The undefined 'to' will be your empty href declaration.

Vuetify not being applied in Laravel

I have Vuetify installed in my Laravel project but none of the v- classes are working. There are no errors in the console though. Here is the app.js file:
require('./bootstrap');
window.Vue = require('vue');
import Vuetify from 'vuetify'
Vue.use(Vuetify);
Vue.component('container-component', require('./components/ContainerComponent.vue').default);
Vue.component('index-component', require('./components/IndexComponent.vue').default);
const vuetify = new Vuetify();
const app = new Vue({
el: '#app',
vuetify
});
and an example component which vuetify isn't being applied to:
<template>
<v-btn>BUTTON</v-btn>
</template>
<script>
export default {
name: "IndexComponent"
}
</script>
<style scoped>
</style>
I just was using a single button to test if it was working.

When you create your Vue istance you must create a new istance of Vuetify also.
const app = new Vue({
el: '#app',
vuetify: new Vuetify()
});
I suggest you also to add this after importing Vuetify:
import 'vuetify/dist/vuetify.min.css'

my component's contents are not being displayed when I use vue-router

I am new to vue. Sorry if this is a silly question. I am using vue-router to route to a component. My url is changing when I click on the router link but the contents of the component are not being displayed. I am not getting any error in the developer tools. It would be a huge help if you can help.
I tried all the answers regarding this issue here and still couldn't get it to work.
src/App.vue
<template>
<div id="app">
<router-link to="/toread">Go toread</router-link>
<router-view></router-view>
</div>
</template>
<script>
import toread from './components/toread.vue';
export default {
name: 'app',
components:{
toread
},
}
</script>
src/components/toread.vue
<template>
<div>
<h1>toread</h1>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
src/main.js
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import Routes from './routes'
import toread from './components/toread.vue'
Vue.use(VueRouter)
const router = new VueRouter({
Routes
});
new Vue({
el: '#app',
render: h => h(App),
router
})
src/routes.js
import toread from './components/toread.vue'
export default[
{path:'/toread', component:toread},
]
I expect to click on the router link and display the h1 tag from toread component.

Change Routes to routes: Routes
const router = new VueRouter({
routes: Routes
});