Symfony Encore (Pimcore) + Vuetify

Question

I'm currently stuck with encore. :(

Stack
Pimcore 6.8.10
Symfony 4.4
webpack-encore-bundle: 1.11.1
vue 2.6
vuetify 2.4.5

Summary
I'm trying to add the vuetify components to my already working project. Unfortunately vue loads and can be used as usual (currently I'm solely using some custom components). But vuetify seems to be a bit reluctant to be added here. Maybe I'm just blind...

Problem
Even though I'm adding v-icon and v-container (which - as I do understand - should not be necessary) in vuetify.js, those are not recognised in FE: Error in console

Error for v-icons:

[Vue warn]: Error in render: "TypeError: vm.$vuetify.icons is undefined"

Error for v-container:

[Vue warn]: Unknown custom element: <v-container>

(Those I just know of causing issues here, so I'm using these elements for testing. In HTML they are just being used regularly: <v-icon>mdi-home</v-icon> )
Afaik, those should be properly defined by vuetify.

Which more or less gives me the idea of "vuetify is not properly instantiated". But why?

Further notes
I'm using yarn so far without any issues. yarn encore dev --watch does not throw any errors here

Following configuration I'm currently using: webpack.config.js:

    let Encore = require('@symfony/webpack-encore');
    const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
    
    
    if (!Encore.isRuntimeEnvironmentConfigured()) {
        Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
    }
    
    
    // Setting if hashes are being used here
    let toVar;
    if (Encore.isProduction()) {
        toVar = 'images/[path][name].[hash:8].[ext]'
    } else {
        toVar = 'images/[path][name].[ext]'
    }
    
    
    Encore
        .setOutputPath('web/build/')
        .setPublicPath('/build')
        .copyFiles({
            from: './assets/images',
            to: toVar
        })
        .addEntry('app', './assets/app.js')
        .splitEntryChunks()
        .enableSingleRuntimeChunk()
        .cleanupOutputBeforeBuild()
        .enableBuildNotifications()
        .enableSourceMaps(!Encore.isProduction())
        .enableVersioning(Encore.isProduction())
        .configureBabelPresetEnv((config) => {
            config.useBuiltIns = 'usage';
            config.corejs = 3;
        })
        .enableSassLoader()
        .enableTypeScriptLoader()
        .enableVueLoader(() => {}, {
            runtimeCompilerBuild: false
        })
        .addPlugin(new VuetifyLoaderPlugin())
    
    module.exports = Encore.getWebpackConfig();

app.js:

import Vue from 'vue/dist/vue'
import './scss/app.scss'
import vuetify from "./js/plugins/vuetify";

// Custom components
import HeaderComponent from "./js/components/HeaderComponent"
import FooterComponent from "./js/components/FooterComponent";
import UserQuickInfoLoggedInComponent from "./js/components/UserQuickInfoLoggedInComponent";
import UserQuickInfoLoggedOutComponent from "./js/components/UserQuickInfoLoggedOutComponent";
import StoryDetailOnOverviewComponent from "./js/components/StoryDetailOnOverviewComponent";
import StoryOnOverviewComponent from "./js/components/StoryOnOverviewComponent";
import StoryDetailOnDetailComponent from "./js/components/StoryDetailOnDetailComponent";
import UserSubscriptionComponent from "./js/components/UserSubscriptionComponent";
import SubscribeComponent from "./js/components/SubscribeComponent";
import ErrorComponent from "./js/components/async/ErrorComponent";
import SuccessComponent from "./js/components/async/SuccessComponent";
import BreadcrumbComponent from "./js/components/BreadcrumbComponent";

const App = new Vue({
    vuetify,
    components: {
        'header-component': HeaderComponent,
        'footer-component': FooterComponent,
        'user-quick-info-logged-in-component': UserQuickInfoLoggedInComponent,
        'user-quick-info-logged-out-component': UserQuickInfoLoggedOutComponent,
        'story-detail-on-overview-component': StoryDetailOnOverviewComponent,
        'story-on-overview-component': StoryOnOverviewComponent,
        'story-detail-on-detail-component': StoryDetailOnDetailComponent,
        'user-subscription-component': UserSubscriptionComponent,
        'subscribe-component': SubscribeComponent,
        'error-component': ErrorComponent,
        'success-component': SuccessComponent,
        'breadcrumb-component': BreadcrumbComponent
    }
})

// Create the App & mount it

App.$mount('#app-root')

export default App

vuetify.js:

// assets/js/plugins/vuetify.js

import Vue from 'vue'
import Vuetify, {
    VIcon,
    VContainer
} from 'vuetify/lib'
import {
    Ripple
} from 'vuetify/lib/directives'
import '@mdi/font/css/materialdesignicons.css'

Vue.use(Vuetify)
import 'vuetify/dist/vuetify.min.css'

export default new Vuetify({
    icons: {
        iconfont: 'mdi', // default - only for display purposes
    },
    components: {
        'v-icon': VIcon,
        'v-container': VContainer
    },
    directives: {
        Ripple,
    },
})

Thank you in advance for any help :)
Best, Bent

Answer 1

For those with a similar problem: I found a solution.

As shown in question I was importing from 'vuetify/lib' and from 'vue/dist/vue' as my IDE suggested and I found in common articles around the web. As unexperienced as I was I didn't think much of it.

So, what is the solution:

In app.js:
import Vue from 'vue/dist/vue' to import Vue from 'vue'

In vuetify.js:\

import Vuetify, {
    VIcon,
    VContainer
} from 'vuetify/lib'

import {
    Ripple
} from 'vuetify/lib/directives'

to

import Vuetify, {
    VIcon,
    VContainer
} from 'vuetify'

import {
    Ripple
} from 'vuetify'

Thanks for sticking around!
Cheers, Bent