1

I'm really hoping to get some help here. I have inheriteda a vue/.net core project from a guy who quit and I/we are not quite sure how to upgrade vuetify successfully. I have done a lot of googling without managing to figure out exactly how to proceed..

Where I am at this point is that I have performed the following steps to upgrade. In the "terminal" in VS Code I have run the following commands:

  • npm install vuetify@latest ( I see the value for vuetify in webpack.config change to "vuetify": "^2.1.12")
  • npm audit fix (because the terminal suggested it)
  • npm run build (just to make sure it builds)

So, the error I get at this point when trying to browse a vue-page is: Error: Vuetify is not properly initialized

At this point I edit the file app.js (which seems to be the entry point for the application) and change the line "import Vuetify from "vuetify";" to "import Vuetify from 'vuetify/lib'" (as suggested by vuetify documentation for "Releases and migrations"). The error that now occurs is:

ERROR in ./node_modules/vuetify/src/components/VCalendar/mixins/calendar-with-events.sass 1:0 Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type. @import '../../../styles/styles.sass' | @import '../_variables.scss'

ERROR in ./node_modules/vuetify/src/components/VDatePicker/VDatePickerHeader.sass 1:0 Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type. @import '../../styles/styles.sass' | | +theme(v-date-picker-header) using ($material)

And the error list seem to go on for every type of vuetify component used in the project

So that's where I'm stuck now. I can't get past this error. I have found some threads suggesting to add "rules" to webpack.config.js but I have not managed to get any of them to work. I'm in desperate need of help actually. This project does not seem to be set up using any "standard suggested way" in any of the threads/articles I've come across and being a .net developer originally all this webpack stuff seems really complicated and I would need some guidance..

My app.js:

import Vue from "vue"; import axios from "axios"; import router from "./router/index"; import store from "./store/store"; import { sync } from "vuex-router-sync"; import App from "components/app-root"; import { FontAwesomeIcon } from "./icons"; import Editor from "@tinymce/tinymce-vue" Vue.component("icon", FontAwesomeIcon); Vue.component("tinymce-editor", Editor) Vue.prototype.$http = axios; sync(store, router); import globalMixins from "./components/common/mxins/global" Vue.mixin(globalMixins) //import Vuetify from "vuetify"; import Vuetify from "vuetify/lib"; Vue.use(Vuetify, { theme: { myColor: "#545454" } }); import "vuetify/dist/vuetify.min.css"; Vue.use(require("vue-shortkey")); var VueCookie = require('vue-cookie'); Vue.use(VueCookie); Vue.use(VueSanitize, vueSanitizeOptions); Vue.use(require('vue-moment')); const app = new Vue({ store, router, ...App }); export { app, router, store };
Improve this question
3
  • I have 2 requests: 1) Please post your app.js file. Just need to make sure that Vuetify is used correctly according to the migration guide 2) The migration guide contains a section named Styles. It says that you need to install saas package and NOT node-sass. Can u check if u are using the correct saas package? Commented Nov 29, 2019 at 12:14
  • Thanks, I can see that node-sass 4.12.0 is already installed (not by me) and also sass-loader 7.1.0. So maybe I need to install the sass package according to the guide? I will do that and get back with the result! Commented Nov 29, 2019 at 12:53
  • Posted an answer with some code as well. Please take a look. Commented Nov 29, 2019 at 13:27

1 Answer 1

Reset to default
1

Please refer this migartion guide and follow it's instructions very carefully. I understand that upgrading to a major version is a pain, so, carefully reading the code changes are very necessary.

I suggest 2 changes in your project:

1) As suggested in the comments, use sass package and not node-sass. The guide suggests the same. Screenshot from migration guide

2) The migration guide has suggested 3 kinds of installation: Plugin Install, Full Install and A-la-Carte install. My guess is that yours is a full install. Based on that here's the change I suggest:

In 1.5, when creating the final app variable, we did not have to specify vuetify in the object. You could just do Vue.use(Vuetify) and it would work.

Vue.use(Vuetify, { theme: { myColor: "#545454" } } const app = new Vue({ store, router, ...App });

In version 2.0, we need to create a separete object of Vuetify and then add it in the app variable

import Vuetify from 'vuetify' // For full install, DO NOT use `vuetify/lib` import 'vuetify/dist/vuetify.min.css' Vue.use(Vuetify) const vuetify = new Vuetify({ theme: { myColor: "#545454" } }) const app = const app = new Vue({ vuetify, store, router, ...App });

As stated again, please read the code in migration guide carefully. It will be more helpful. If the instructions for full install does not work, then, maybe try the a-la-carte install instructions. The difference between the 2 is how vuetify is imported in app.js and import of vueitfy.min.css

Improve this answer
Sign up to request clarification or add additional context in comments.

6 Comments

Well, it seems that this helped! I now get all the warnings about how some props are obsolete etc so I fixed them on my "start page". The only thing that seems not to work is that the page seems to have no styling. It is as if the css is not loaded correctly.. I suspect it's the "import vuetify/dist/vuetify.min.css" that is not correct.. Do you have any suggestion to what could be the cause?
@TobyFieldgroove Glad I could help. Please consider upvoting this answer and accepting this as a valid answer by clicking the tick icon. It will help the community in finding the right solutions.
I absolutely will! And if you have any suggestions to my last question I'd greatly appreciate it!
It seems as if the application no longer understands to use Material Design icons or colors etc...
I am not sure how to fix the CSS problem, but, you can try either of the 2 options: 1) Try the code mentioned under a-la-carte install intructions. That means remove the import vuetify.min.css line. And import vuetify using import Vuetify from 'vuetify/lib' 2) Read the topic Theme in migration guide. It suggests to change your theme object. So, the code could look like Vue.use(Vuetify, { theme: { themes:{ light: { myColor: "#545454" } } } }
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.