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 got a white screen in my simple demo component and I have not any idea what is wrong with my code.
Dashboard.vue
<template>
<div id="app">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Hello'
}
}
}
</script>
main.js
import Vue from 'vue'
import Dashboard from './components/Dashboard.vue'
new Vue({
el: '#app',
components : {
Dashboard
}
})
Just white screen, components are not present in DOM. Vue2.X
Place this in your main.js, there's no render function in yours:
import Vue from "vue";
import Dashboard from "./components/Dashboard.vue";
Vue.config.productionTip = false;
new Vue({
render: h => h(Dashboard)
}).$mount("#app");
I have an existing project where I would like to add one vue component. But I don't want to transform the whole website into a Vue application - just add some components on the page. But I want to be able to use Single File Components and webpack.
It works if I do it like this with a CDN.
<html>
<head>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<div>Static div</div>
<my-component></my-component>
</div>
<script type="module">
import MyComponent from './MyComponent.js'
new Vue({
el: '#app',
components: { MyComponent },
})
</script>
</body>
</html>
But if I try to do it using .vue single file components and webpack then it is not working. It replaced my #app div with the following:
< -- function(e,n,r,o){return He(t,e,n,r,o,!0)} -->
index.js
import Vue from 'vue';
import MyComponent from './MyComponent';
new Vue({
el: '#app',
components: { MyComponent },
});
But if I add a render function then it works but in this case it replaces my div#app with the App component. I did not want that. I just wanted to add some components to my div#app like I did with CDN.
import Vue from 'vue';
import App from './App';
new Vue({
el: '#app',
render: h => h(App),
});
Can you do this then?
<div id="app">
<div>Static div</div>
<div id="vueApp"></div>
</div>
import Vue from 'vue';
import App from './App';
new Vue({
el: '#vueApp',
render: h => h(App),
});
I want to use vue.js with vue-router, but the onclick doesn't work.
in App.vue:
<template>
<div id="app">
<hello></hello>
<router-view></router-view>
</div>
</template>
<script>
import hello from './components/hello/Hello.vue'
export default {
name: 'app',
components: {
hello
}
}
</script>
<style>...</style>
If I connect Hello.vue like above, I can't use onclick event (maybe another too, I can't try). After click on the button nothing happens.
but if I connect Hello.vue in router:
main.js ↓
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router';
import hello from './components/hello/Hello.vue'
new Vue({
el: '#app',
template: '<App/>',
components: { App }
});
Vue.use(VueRouter);
const routes = [
{
path: '/hello',
name: 'hello',
component: hello
},
];
var router = new VueRouter({
mode: 'history',
base: __dirname,
routes
});
const app = new Vue({
router
}).$mount('#app');
then the button works! How I can use components not in router. For example change Hello.vue to topMenu.vue. I want use menu on all pages on site, but I don't want duplicate menu in each page component, it's not DRY!
I found the answer. It was so easy, in my code I just replaced:
const app = new Vue({
router
}).$mount('#app');
with:
const app = new Vue({
router,
render: function(createElement){
return createElement(App)
}
}).$mount('#app')
I'm following the Laracasts Tutorials on Vue.js and i've hit a bit of a roadblock, i have a vueify component called app-footer.vue that contains all of my styles scripts and template.
<style>
.red {
background-color: #000;
}
</style>
<template>
<p class="footer-text">Copyright {{ currentYear }} </p>
</template>
<script>
export default {
data () {
return {
currentYear: new Date().getFullYear()
}
}
}
</script>
Then in my view i define the component as
<app-footer></app-footer>
And finally in my app.js file i import the template file and add it to my Vue instance's components list as follows
window.Vue = require('Vue');
import AppFooter from './components/app-footer.vue';
new Vue({
el: 'body',
components: { AppFooter }
});
I just keep getting Component errors asking me if i've
defined it correctly what exactly am i doing wrong?
The issue was simple, i forgot to name the component when setting it in my Vue declaration.
WRONG
new Vue({
el: 'body',
components: { AppFooter }
});
RIGHT
new Vue({
el: 'body',
components: { 'app-footer': AppFooter }
});