Bundle for Symfony 4.4, 5+ or 6+ with Vuetify frontend, having twig content passed down to vue components
MIT License
Integrate Vuetify into your Symfony application, making it easy to pass serverside data to Vue through Twig.
Assuming you have a Symfony 4.4, 5+ or 6+ application installed on a server with composer, yarn (or npm) and required modules:
composer require k3ssen/symfony-vuetified
php bin/console symfony-vuetified:setup
if you just created a new symfony project.yarn install
.yarn --dev add vue@^2.5 vue-class-component@^7.2 vue-property-decorator@^9.1 vue-template-compiler@^2.6.10 vuetify@^2.4 vuetify-loader@^1.7
yarn dev
yarn dev
again.This bundle aims to quickly achieve the following:
data-
attributes in HTML.The basic concept is that you can use a global vue object. This object will be used for creating the vue-instance.
{% extends 'base.html.twig' %}
{% block body %}
<p>
@{ seconds } seconds have passed.
</p>
{% endblock %}
{% block script %}
<script>
vue = {
data: () => ({
seconds: 0,
}),
mounted() {
setInterval(() => {
this.seconds++;
}, 1000);
},
};
</script>
{% endblock %}
Note: Vue and Twig both use
{{
and}}
delimiters by default, so here@{
and}
are used instead for Vue. You can specify different delimiters if you want, but avoid using${
like Symfony's example: When you use${something}
this is parsed as javascript variable when used inside ticks ( ` ), which can be really confusing.
vue_data
When passing data, you’ll often need to do things like below:
{% block script %}
<script>
vue = {
data: () => ({
someObject: {{ someObject | json_encode | raw }},
anotherObject: {{ anotherObject | json_encode | raw }},
})
}
</script>
{% endblock %}
If you need to pass server data to vue, you can use vue_data
instead:
{% block body %}
{{ vue_data('someObject', someObject) }}
{{ vue_data('anotherObject', anotherObject) }}
<div v-if="someObject && anotherObject">
This text is only shown if both objects have a value.
</div>
{% endblock %}
Data added this way will be json encoded and merged with the global vue object.
$store
and vue_store
In addition to adding data to the vue-instance, data can be added to the vue $store observable, making data available to all vue components.
{% block body %}
{{ vue_store('someObject', someObject) }}
{{ vue_store('anotherObject', anotherObject) }}
<div v-if="$store.someObject && $store.anotherObject">
This text is only shown if both objects have a value.
</div>
{% endblock %}
Custom and vendor Vue-components aren't global by default, so they can't be used in Twig.
The globalComponents.ts
file makes the components of Vuetify and this bundle globally available.
This way you can use these components almost wherever you want, including Twig.
The downside is that this'll increase the size of your javascript resources.
If you want don't want to make all these components global, you can choose to use the
vue-object.init.ts
file instead of using import '@k3ssen/symfony-vuetified'
.
Inside your app.ts
, it would look something like below:
//... other stuff in your app.js file
import Vue from 'vue';
import vueObject from '@k3ssen/symfony-vuetified/vue-object-init';
if (document.getElementById('sv-app') && typeof window.vue === 'object') {
new Vue(vueObject);
}
Now only components of the vue-core will work in twig, so you won't be able
to use components like <sv-form>
of <v-alert>
in your twig files.
If you want to make specific components available to twig, <sv-app>
for example, you could use something like this:
Vue.component('SvApp', () => import('@k3ssen/symfony-vuetified/components/SvApp'));
Because dynamic vue components can be rendered at runtime, the same principles can be used with fetch
and load the
response in a component.
This project includes a FetchComponent that makes it really easy:
<sv-fetch url="/url-to-controller-action"></sv-fetch>
If you're using {% extends '@SymfonyVuetified/base.html.twig' %}
in your base.html.twig
then the suitable file to extend will be used:
if you're using fetch, only a template and the script will be loaded. Otherwise, the entire page is loaded.
Note: this component requires loading the fetched javascript. Fetching a page that defines variables/constants that were defined already will result in javascript-errors. Therefore, this bundle uses
window
to put global objects (like the globalvue
) into. Thesv-fetch
component specifically takes the global objects vue, vueData, vueStoreData into account by clearing these objects before fetching new content.
Using form-functions in Twig or form_themes to create a Vuetify-form is difficult, especially when dealing with
edge-cases. This bundle enables you to render Symfony's FormView
clientside:
{% block body %}
<sv-form :form="{{ form | vue}}"></sv-form>
{% endblock %}
You can take full control and render parts individually. It takes some getting used to it, because obviously Vue works differently from Twig's form-method, but it is quite powerful.
Read the forms documentation for more information.