Can’t update Vuetify project to vuetify 2.0.0-beta5

Asked By: Anonymous

Got a problem when updating from vuetify LTS to vuetify 2.0.0-beta.5.

Before all worked great, vuetify styles were loading from app.scss

Error:

[Vue warn]: Error in getter for watcher “isDark”: “TypeError: Cannot
read property ‘dark’ of undefined”

TypeError: Cannot read property ‘dark’ of undefined

[Vue warn]: Error in render: “TypeError: Cannot read property ‘dark’
of undefined”

I’ve uninstalled vuetify, then install and update it to a beta version like this https://stackoverflow.com/a/49250912

package.json

{
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^5.9.0",
    "@mdi/font": "^3.7.95",
    "@symfony/webpack-encore": "^0.22.0",
    "axios": "^0.19.0",
    "chart.js": "^2.8.0",
    "less": "^3.9.0",
    "less-loader": "^4.1.0",
    "material-design-icons-iconfont": "^5.0.1",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "vue": "^2.6.8",
    "vue-loader": "^15.7.0",
    "vue-template-compiler": "^2.6.8",
    "webpack-dev-server": "^3.2.1",
    "webpack-notifier": "^1.6.0"
  },
  "license": "UNLICENSED",
  "private": true,
  "scripts": {
    "dev-server": "encore dev-server --hot --disable-host-check --host 174.28.1.5 --public 174.28.1.5:8080",
    "dev": "encore dev",
    "watch": "encore dev --watch",
    "build": "encore production --progress"
  },
  "dependencies": {
    "apexcharts": "^3.8.1",
    "chart.js": "^2.8.0",
    "core-js": "^3.1.4",
    "vue-apexcharts": "^1.4.0",
    "vue-google-signin-button": "^1.0.4",
    "vue-telegram-login": "^2.1.0",
    "vuetify": "^1.5.14",
    "vuex": "^3.1.1"
  }
}

webpack.config.js

var path = require('path');
var Encore = require('@symfony/webpack-encore');

Encore
    .setOutputPath('public/build/')
    .setPublicPath('/build')
    .addStyleEntry('styles', './assets/css/app.scss')
    .enableSassLoader()
    .enableVueLoader()
    .addEntry('landing', './assets/js/modules/landing/main.js')
    .addEntry('main', './assets/js/modules/dashboard/main/main.js')
    .addEntry('main-m', './assets/js/modules/dashboard_m/main.js')
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    .cleanupOutputBeforeBuild()
    .enableVersioning(Encore.isProduction())
    .enableSingleRuntimeChunk()
;
main_config = Encore.getWebpackConfig();
main_config.resolve.alias["~"] = path.resolve(__dirname, 'assets/js');
module.exports = main_config;

main.js

import Vue from 'vue';
import Vuetify from 'vuetify';
import VueApexCharts from 'vue-apexcharts';
import Dashboard from './Dashboard';
import store from './store/index'

Vue.component('current-session', () => import('./DashboardModule'));

Vue.use(Vuetify, {
    iconfont: 'fa'
});
Vue.use(VueApexCharts);

Vue.component('apexchart', VueApexCharts);

require('apexcharts');
require('vue-apexcharts');

new Vue({
    el: '#dashboard-m',
    store,
    components: {Dashboard},
    render: a => a(Dashboard),
});

app.scss

@import "[email protected]/fontawesome-free/css/all.min.css";

have made a try to fix it by adding vuetify-loader, not that i have made it correctly but it still not working, here my updates:

webpack.config.js

const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
// .enableSassLoader() - turned off it
.addLoader({
        test: /.s(c|a)ss$/,
        use: [
            'style-loader',
            'vue-style-loader',
            'css-loader',
            {
                loader: 'sass-loader',
                options: {
                    implementation: require('sass'),
                    fiber: require('fibers'),
                    indentedSyntax: true // optional
                }
            }
        ]
    })

delete node-sass from package.json

So when a have added this

<v-app id="inspire" :dark="false">

i have solved my problem with <v-app> tag, but got that another components do not load default props
like this:

[Vue warn]: Error in mounted hook: “TypeError: Cannot read property
‘register’ of undefined”

or this:

[Vue warn]: Error in getter for watcher “showOverlay”: “TypeError:
Cannot read property ‘width’ of undefined”


Solution

Answered By: Anonymous

Thanks jacek (Vuetify core team)
Here right way to add vuetify to Vue:

// v2.0
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

const opts = { ... }
Vue.use(Vuetify)

new Vue({
  vuetify: new Vuetify(opts)
}).$mount('#app')
techinplanet staff

techinplanet staff


Windows 10 Kaufen Windows 10 Pro Office 2019 Kaufen Office 365 Lizenz Windows 10 Home Lizenz Office 2019 Home Business Kaufen windows office 365 satın al follower kaufen instagram follower kaufen porno