PHPackages                             k3ssen/symfony-vuetified - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Templating & Views](/categories/templating)
4. /
5. k3ssen/symfony-vuetified

ActiveLibrary[Templating & Views](/categories/templating)

k3ssen/symfony-vuetified
========================

Bundle for Symfony 4.4, 5+, 6+ applications with Vuetify

v0.3.0(4y ago)152072MITVuePHP >=7.1.3

Since Apr 29Pushed 3y ago4 watchersCompare

[ Source](https://github.com/k3ssen/SymfonyVuetified)[ Packagist](https://packagist.org/packages/k3ssen/symfony-vuetified)[ RSS](/packages/k3ssen-symfony-vuetified/feed)WikiDiscussions master Synced 2d ago

READMEChangelog (10)Dependencies (1)Versions (13)Used By (0)

SymfonyVuetifiedBundle
======================

[](#symfonyvuetifiedbundle)

Integrate Vuetify into your Symfony application, making it easy to pass serverside data to Vue through Twig.

Getting started
===============

[](#getting-started)

Assuming you have a Symfony 4.4, 5+ or 6+ application installed on a server with composer, yarn (or npm) and required modules:

1. Run `composer require k3ssen/symfony-vuetified`
2. Run `php bin/console symfony-vuetified:setup` if you just created a new symfony project. Otherwise, see the [manual setup](./Resources/docs/setup.md) documentation.
3. Install dependencies
    1. Start by running `yarn install`.
    2. Make sure to add the peer-dependencies as well. Preferably you should check the output in your console, though the following should probably suffice:
        `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`
    3. Run `yarn dev`
        When you see an Error for missing required bundles, install that bundle and run `yarn dev` again. Keep repeating this process (about 5 times) until DONE.

Concept/usage
=============

[](#conceptusage)

This bundle aims to quickly achieve the following:

- Communicate serverside data from Twig to Vue without resorting to API's or `data-` attributes in HTML.
- Build your vue-components using Vuetify, Typescript and the [vue-property-decorator](https://npm.io/package/vue-property-decorator).
- Render your Symfony form in Vuetify by using client-side form-rendering.
- Render dynamic vue components that are fetched and loaded via twig-files.

Global vue object
-----------------

[](#global-vue-object)

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 %}

        @{ seconds } seconds have passed.

{% endblock %}
{% block script %}

        vue = {
            data: () => ({
                seconds: 0,
            }),
            mounted() {
                setInterval(() => {
                    this.seconds++;
                }, 1000);
            },
        };

{% 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](https://symfony.com/doc/5.2/frontend/encore/vuejs.html#using-vue-inside-twig-templates): When you use `${something}` this is parsed as javascript variable when used inside ticks ( ` ), which can be really confusing.

Passing serverside data to vue: `vue_data`
------------------------------------------

[](#passing-serverside-data-to-vue-vue_data)

When passing data, you’ll often need to do things like below:

```
{% block script %}

        vue = {
            data: () => ({
                someObject: {{ someObject | json_encode | raw }},
                anotherObject: {{ anotherObject | json_encode | raw }},
            })
        }

{% 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) }}

        This text is only shown if both objects have a value.

{% endblock %}
```

Data added this way will be json encoded and merged with the global vue object.

Global observable: `$store` and `vue_store`
-------------------------------------------

[](#global-observable-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) }}

        This text is only shown if both objects have a value.

{% endblock %}
```

Global vue components
---------------------

[](#global-vue-components)

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 `` of `` in your twig files. If you want to make specific components available to twig, `` for example, you could use something like this:

```
Vue.component('SvApp', () => import('@k3ssen/symfony-vuetified/components/SvApp'));

```

Fetch component
===============

[](#fetch-component)

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:

```

```

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 global `vue`) into.
> The `sv-fetch` component specifically takes the global objects vue, vueData, vueStoreData into account by clearing these objects before fetching new content.

Symfony form rendered in Vue
----------------------------

[](#symfony-form-rendered-in-vue)

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 %}

{% 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](./Resources/docs/forms.md) for more information.

###  Health Score

27

—

LowBetter than 49% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity20

Limited adoption so far

Community10

Small or concentrated contributor base

Maturity48

Maturing project, gaining track record

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~79 days

Recently: every ~94 days

Total

10

Last Release

1486d ago

PHP version history (3 changes)v0.0.1PHP ^7.2.5

v0.0.2PHP >=7.2.5

v0.2.0PHP >=7.1.3

### Community

Maintainers

![](https://www.gravatar.com/avatar/6c82b351db87f0e465fc49058d44358eaff9608f6bb022e849aeb2e7498aee46?d=identicon)[kevin3ssen](/maintainers/kevin3ssen)

---

Top Contributors

[![k3ssen](https://avatars.githubusercontent.com/u/6702426?v=4)](https://github.com/k3ssen "k3ssen (67 commits)")

---

Tags

phpphp7php72php73php74php8php80symfonysymfony4symfony5twigtypescriptvuejsvuetifyphpsymfonyJSPHP7php8vuesymfony4symfony5symfony6php81vuetify

### Embed Badge

![Health badge](/badges/k3ssen-symfony-vuetified/health.svg)

```
[![Health](https://phpackages.com/badges/k3ssen-symfony-vuetified/health.svg)](https://phpackages.com/packages/k3ssen-symfony-vuetified)
```

###  Alternatives

[endroid/qr-code-bundle

Endroid QR Code Bundle

32110.6M17](/packages/endroid-qr-code-bundle)[yellowskies/qr-code-bundle

Symfony Barcode & QR Code Generator Bundle with Twig extension

36682.9k](/packages/yellowskies-qr-code-bundle)[php-tmdb/symfony

Symfony Bundle for TMDB (The Movie Database) API. Provides easy access to the php-tmdb/api library.

3649.7k](/packages/php-tmdb-symfony)[andanteproject/page-filter-form-bundle

A Symfony Bundle to simplify the handling of page filters for lists/tables in admin panels.

1070.3k](/packages/andanteproject-page-filter-form-bundle)[goetas/twital-bundle

Twital templating engine Symfony Bundle

206.8k](/packages/goetas-twital-bundle)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)