CODEWITHSUNDEEP
symfonywebpackvue.jsvuetify.js
yerpy
yerpy

Reputation: 1446

Vuetify inside symfony project

I cannot find anything which would be helpful ( probably becouse I am not experienced web developer ) about setting up Vuetify with Symfony project. I am missing a css-loader and cannot figure out how it should be set.

enter image description here

// webpack.config.js
var Encore = require('@symfony/webpack-encore');

const { VueLoaderPlugin } = require('vue-loader');

Encore
    // the project directory where all compiled assets will be stored
    .setOutputPath('public/build/')

    // the public path used by the web server to access the previous directory
    .setPublicPath('/build')

    // will create public/build/app.js and public/build/app.css
    .addEntry('app', './assets/js/app.js')

    // allow legacy applications to use $/jQuery as a global variable
    .autoProvidejQuery()

    // enable source maps during development
    .enableSourceMaps(!Encore.isProduction())

    // empty the outputPath dir before each build
    .cleanupOutputBeforeBuild()

    // show OS notifications when builds finish/fail
    .enableBuildNotifications()

    .addPlugin(new VueLoaderPlugin())

    .enableVueLoader()

    // create hashed filenames (e.g. app.abc123.css)
    // .enableVersioning()

    // allow sass/scss files to be processed
    .enableSassLoader()
;

// export the final configuration
module.exports = Encore.getWebpackConfig();

It's pretty basic webpack.congi.js

app.js

import '@babel/polyfill'
import Vue from 'vue'
import App from './components/App.vue'
import router from './router'

import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify);

Vue.config.productionTip = false;

new Vue({
    el: '#app',
    router,
    components: { App },
    template: '<App/>'
});

I found how to set the webpack with vuetify but I am feeling that it's not for symfony project tho. webpack + css-loader

Any ideas how could I set it ?

Upvotes: 5

Views: 4384

Answers (3)

morphatic
morphatic

Reputation: 7955

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.

Upvotes: 6

Job Gathu
Job Gathu

Reputation: 51

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

Upvotes: 0

yerpy
yerpy

Reputation: 1446

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

Upvotes: 1

Related Questions