I’m trying to add vue + vuex + vuetify framework to my django project
I have installed node.js and yarn, then prescribed the commands – yarn global add @vue/cli
and vue create client
in project root dir, and modified the config files:
package.json
{
"name": "client",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"dev": "vue-cli-service build --dest=../../static/builds/dev --mode=development --watch"
},
"dependencies": {
"axios": "^0.21.4",
"copy-to-clipboard": "^3.3.1",
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-modal-dialogs": "^3.0.0",
"vue-router": "^3.2.0",
"vuedraggable": "^2.24.3",
"vuetify": "2.6.5",
"vuex": "^3.4.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"sass": "~1.32.0",
"sass-loader": "^10.0.0",
"vue-cli-plugin-vuetify": "~2.4.2",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.7.0"
}
}
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'
Vue.config.productionTip = false
new Vue({
router,
store,
vuetify,
render: h => h(App)
}).$mount('#app')
vuetify.js
import Vue from 'vue'
import Vuetify from 'vuetify/lib/framework'
import ru from 'vuetify/es5/locale/ru'
import "vuetify/dist/vuetify.min.css";
Vue.use(Vuetify);
export default new Vuetify({
lang: {
locales: {ru},
current: 'ru'
}
});
then I ran the yarn dev
command and plugged the assembled files into the existing html from static
<script defer="defer" src="{% static 'builds/dev/js/app.js'%}"></script>
<div class="tab-pane fade" id="structure-tab-content" role="tabpanel" aria-labelledby="structure-tab">
<div id="app"></div>
</div>
But vuetify is not built correctly, the tags work, but the styles don’t, no matter what I do
example how it should be
as you can see there is no icons and no styles
tried everything from this thread vuetify icon not showing but nothing works
2
Which package did you install? If you have installed material-design-icons-iconfont
You should add below styles in main.js:
import 'material-design-icons-iconfont/dist/material-design-icons.css';
If you import @mdi/font/css/materialdesignicons.css
as from your comments:
You should install package: @mdi/font
Both of these lines are importing CSS files for Material Design Icons, but from different packages.
1