Vue.js Component Rendering

Render Vue.js from inside Twig

Built a Vue.js component? Render it quickly & easily in Twig and pass in dynamic props. 

composer require symfony/ux-vue

What Vue.js gives you

  • Vue in Twig

    Render a component with one Twig function.

  • Props from PHP

    Pass arrays straight into the component.

  • Component events

    Listen to Vue events from a Stimulus controller.

  • AssetMapper ready

    No bundler required to get started.

  • Island by island

    Add Vue only where the page needs it.

Render Vue components from Twig

Add Vue.js to your app.

Quickly render <Vue /> components & pass them props.

assets/vue/controllers/PackageSearch.js 
/**
 |  Single-File Components - e.g. PackageSearch.vue -
 |  are supported when you build with a bundler, through Symfony Reprise.
 */
import { ref, computed } from 'vue';
import PackageList from "../components/PackageList.js";

export default {
    components: {
        PackageList
    },
    props: ['packages'],
    setup(props) {
        const search = ref('');

        const filteredPackages = computed(() => {
            return props.packages.filter(
                uxPackage => uxPackage.humanName.toLowerCase().includes(search.value.toLowerCase())
            );
        });

        return {
            search,
            filteredPackages
        }
    },
    template: `
        <div>
            <input
                v-model="search"
                class="w-full px-3 py-1.5 border border-solid border-border rounded-sm bg-body text-body-text focus:border-link focus:[outline:revert]"
                type="search"
                placeholder="This search is built in Vue.js!"
            />

            <div class="mt-3">
                <PackageList :packages="filteredPackages" />
            </div>
        </div>
    `
};
templates/ux_packages/vue.html.twig 
{% extends 'base.html.twig' %}

{% block body %}
    <div {{ vue_component('PackageSearch', {packages: packagesData}) }}>
        Loading...
    </div>
{% endblock %}
Symfony logo

UX Vue.js

Loading...

Islands inside your Twig

How a component lands on the page.

Symfony still renders the page. Vue takes over only the elements you hand it, with the props you built in PHP.

Registered by convention

Anything under the controllers directory is registered by name. No manifest to maintain.

assets/vue/controllers/
└── Hello.vue

Rendered from Twig

The function writes the data attributes the Stimulus controller reads to mount the component.

<div {{ vue_component('Hello', {
    name: app.user.name,
}) }}></div>

Hooks around the mount

Events fire before and after mounting, which is where you register plugins or a router.

document.addEventListener(
    'vue:before-mount',
    (event) => event.detail.app.use(router),
);

Install Vue.js.

$ composer require symfony/ux-vue

More from Symfony UX.

Vue.js is one package among many. They share the same Stimulus foundation and install the same way.

Image for the Icons UX package

Icons

Render SVG icons seamlessly from your Twig templates.

Image for the Map UX package

Map

Render interactive Maps in PHP with Leaflet or Google Maps.

Image for the Twig Components UX package

Twig Components

Create PHP classes that can render themselves

Browse every package

Keep Vue.js at hand.

Documentation, the people behind it, and where to ask when something does not behave.

Documentation

Symfony UX Vue.js Docs
Community

Feedback · support · contributions.
Support

Get help with Symfony UX Vue.js