Vuetify inside symfony project

If you're trying to do this with Vuetify v2.x, rather than loading the styles from an external CDN (see yerpy's answer), you can load them via webpack as well. Assuming you've already created your Symfony project, first, make sure symfony encore is installed:

$ composer require encore

Then install dependencies Vue and Vuetify:

$ npm i -S vue vuetify

Then install dev dependencies:

$ npm i -D vue-loader vuetify-loader vue-template-compiler sass sass-loader fibers

Then in webpack.config.js you'll want to import vuetify-loader at the top of the file and configure Encore as follows:

var Encore = require('@symfony/webpack-encore');const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')if (!Encore.isRuntimeEnvironmentConfigured()) {    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');}Encore    .setOutputPath('public/build/')    .setPublicPath('/build')    .enableVueLoader() // <-- IMPORTANT: this loads Vue    // NOTE: I put my Vue app in assets/vue which I think is non-standard    //       but it allows me to structure my Vue app as I would in a non-Symfony app    .addEntry('app', './assets/vue/main.js')    .splitEntryChunks()    .enableSingleRuntimeChunk()    .cleanupOutputBeforeBuild()    .enableBuildNotifications()    .enableSourceMaps(!Encore.isProduction())    .enableVersioning(Encore.isProduction())    .configureBabel(() => {}, {        useBuiltIns: 'usage',        corejs: 3    })    // add VuetifyLoaderPlugin: THIS loads all of the Vuetify components    .addPlugin(new VuetifyLoaderPlugin())    // enables Sass/SCSS support    .enableSassLoader(options => {        options.implementation = require('sass')        options.fiber = require('fibers')    });module.exports = Encore.getWebpackConfig();

Caveat, I am not a Symfony developer so I can't say this is the "best" way to do this. Here's a repo with a working example in case you need to see other files/configuration necessary to get all these things to play nice together.

For those who are struggling / were struggling with the same issue the solution is pretty simple but not so obvious.

Inside base.html.twig or what ever is your twig file it has to be included:

{% block stylesheets %}    <link href="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.min.css" rel="stylesheet">{% endblock %}

Otherwise symfony will not be able to load css'sys

My setup looks like this:

• Install encore, follow the instructions at https://symfony.com/doc/current/frontend/encore/installation.html
• I use yarn, so yarn install to install dependancies
• install vuetify - yarn add vuetify
• include vuetify in your application js entry point
• include vuetify stylesheet as well (like you did)
• most importantly you should require your main css/scss or whatever you use. In my case I have require(path to css)..this way, your css plus vuetify css will be compiled together