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
}
})
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.
I have setup Vuetify on my Vue webpack application.
My project is setup with vue init webpack my-project running Vue 2.5.2 and using Vuetify 2.0.2.
I have installed Vuetify in my App.js
import Vue from 'vue'
import '../node_modules/vuetify/dist/vuetify.min.css';
import App from './App'
import router from './router'
import store from './store'
import Vuetify from 'vuetify'
Vue.use(Vuetify)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
render: h => h(App)
})
Everything seems to be working fine. I'm able to call Vuetifycomponents in one of my components.
<template>
<v-container>
<v-card width="400" height="150" raised>
<h4>Hello</h4>
</v-card>
</v-container>
</template>
I then read that I need to wrap my App.js with the v-app component, but when I do that I get an error saying: Error: Vuetify is not properly initialized.
<template>
<div id="app">
<v-app>
<NavigationBar />
<v-content>
<router-view />
</v-content>
</v-app>
</div>
</template>
Maybe Vuetify isn't installed correctly, I hope some of you can bring some light on my issue.
There is lot of changes with new version.
try this
import Vue from 'vue';
import Vuetify from 'vuetify';
Vue.use(Vuetify);
new Vue({
vuetify : new Vuetify(),
...
});
good luck
I do it this way (vue 3.9, vuetify 2.0)
In main.js (or App.js)
import vuetify from './plugins/vuetify'
...
new Vue({
...
vuetify,
render: h => h(App)
}).$mount('#app')
In plugins/vuetify.js
import Vue from "vue"
import Vuetify from "vuetify/lib"
Vue.use(Vuetify)
export default new Vuetify({
icons: {
iconfont: 'md', // 'mdi' || 'mdiSvg' || 'md' || 'fa' || 'fa4'
},
theme: {
dark: false,
},
themes: {
light: {
primary: "#4682b4",
secondary: "#b0bec5",
accent: "#8c9eff",
error: "#b71c1c",
},
},
})
in App.vue
<template>
<v-app>
...
</v-app>
</template>
If you are using vue-cli, Add these lines to file index.html after meta tags:
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify#2.x/dist/vuetify.min.css" rel="stylesheet">
And your main.js should look like this:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuetify from 'vuetify'
Vue.config.productionTip = false
Vue.use(Vuetify)
export default new Vuetify({ })
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
vuetify: new Vuetify(),
components: { App },
template: '<App/>'
})
Patrice has one of my preferred finely tailored answers, depending on configuration, this may be what you need:
webpack | vue 2.5+ | vuetify 2.1+
In your main.js/App.js
import Vue from 'vue'
import router from './router'
import vuetify from './plugins/vuetify' // path to vuetify export
//Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
router,
vuetify,
});
In your plugins/vuetify.js
// resources/js/plugins/vuetify.js
import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify/lib'
Vue.use(Vuetify)
const opts = {}
export default new Vuetify({
icons: {
iconfont: 'md', // default - only for display purposes
},
})
In your EaxmpleComponent.vue and all other vue files:
Wrap all vue components in v-app and template tag like:
<template>
<v-app>
...
</v-app>
</template>
I had encountered same issue.
vuetify#2.3.2
vue#2.6.11
nuxt#2.13.0
+ typescript
I got solved with below.
[layouts/default.vue]
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
import Vuetify from 'vuetify'
#Component({
vuetify:new Vuetify()
})
export default class extends Vue {
}
</script>
if you not typescript
below helps you.
<script>
import Vuetify from 'vuetify'
export default {
vuetify: new Vuetify(),
}
</script>
Try adding:
const opts = {
theme: {
dark: true,
themes: {
light: {
primary: '...',
...
},
dark: {
primary: '...',
...
}
}
}
}
and
new Vue({
el: '#app',
router,
store,
vuetify: new Vuetify(opts),
render: h => h(App)
})
to your main.js.
When adding vuetify (2.x) to gridsome, I had the same problem and had to add the vuetify import object to appOptions in main.js:
appOptions.vuetify = new Vuetify({})
as described in:
https://github.com/gridsome/gridsome.org/blob/master/docs/assets-css.md
and
https://github.com/gridsome/gridsome/issues/603#issuecomment-567056678
Below link Helped me.
https://www.codetd.com/en/article/7261224
import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './store/index'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
Vue.config.productionTip = false
Vue.use(Vuetify)
// vuetify 自定义配置
export default new Vuetify({})
new Vue({
router,
store,
vuetify: new Vuetify(),
render: h => h(App)
}).$mount('#app')
I tried to create some organization in my Vue app, so I moved my router confirguration to a separate file:
# /_helpers/router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import MemberDetail from '../MemberDetail';
import LoginPage from '../LoginPage';
Vue.use(VueRouter)
const routes = [
{ path: '/', component: MemberDetail },
{ path: '/login', component: LoginPage },
];
export const router = new VueRouter({routes});
router.beforeEach((to, from, next) => {
// redirect to login page if not logged in and trying to access a restricted page
const publicPages = ['/login'];
const authRequired = !publicPages.includes(to.path);
const loggedIn = localStorage.getItem('user');
if (authRequired && !loggedIn) {
return next('/login');
}
next();
})
Then I add the exported router in my main application.js:
import Vue from 'vue/dist/vue.esm'
import App from '../components/app.vue'
import { router } from '../components/_helpers';
document.addEventListener('DOMContentLoaded', () => {
new Vue({
el: '#app',
router,
render: h => h(App)
});
})
In my App.vue, I try to display the router-view:
<template>
<div class="page-container">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
};
</script>
<style scoped>
</style>
Unfortunataly this results in the following error:
[Vue warn]: Unknown custom element: <router-view> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
I don't understand what's wrong... I'm adding the router to the new Vue call, so I think it should be available.
Thanks
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
});