Home

What is SymfonyVuetified?

SymfonyVuetified is a Symfony bundle combined with some javascript assets to make it easy to use Vue in Twig. On top of Vue the Vuetify library is used.

Motivation:

The How to use Vue in Twig page explains different ways of using Vue in Twig and motivates when/why/how to use vue objects in Twig. Once a vue-object is used, you can modify this object, enabling you to do things like {{ vue_data('product', product) }} to pass a serverside product-object into the vue-data.

Its concept is (hopefully) easy to grasp, but a boring task to setup, especially when combined with Vuetify. That's what this SymfonyVuetified bundle is for: to quickly get started using this way of using vue in Twig.

Why Vuetify?

You might wonder why Vuetify is integrated into this bundle. There are roughly two reason:

1. If you only need to integrate Vue into Twig, you can simply build this into your own project without any bundle. Out of this project you'd only need the following:
   1. A Service for storing files: VueDataStorage
   2. A TwigExtension for using this service in twig: VueExtension
   3. A twig base file
   4. Some logic to create a Vue instance of your vue-object: see vue-object-init.ts and index.js
2. Vuetify is a very complete library that is great to use, but there challenges to setup Vuetify and especially forms are hard to combine with Symfony. This bundle is meant to make that job easier for you.

In the end Vuetify was a personal choice for creating this bundle. The same needs might exist for libraries like BootstrapVue, but supporting all libraries is impossible and a more generic bundle would probably be too incomplete to be useful.