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


[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


  "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 --public",
    "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"


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

    .addStyleEntry('styles', './assets/css/app.scss')
    .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')
main_config = Encore.getWebpackConfig();
main_config.resolve.alias["~"] = path.resolve(__dirname, 'assets/js');
module.exports = main_config;


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.component('apexchart', VueApexCharts);


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


@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:


const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
// .enableSassLoader() - turned off it
        test: /.s(c|a)ss$/,
        use: [
                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”


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 = { ... }

new Vue({
  vuetify: new Vuetify(opts)
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