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 Router UX package

Router New

Generate your Symfony routes' URLs in JavaScript

Image for the Image UX package

Image New

Responsive img tags, transformed by your CDN

Image for the CSS UX package

CSS New

Atomic CSS from your design tokens, checked when Twig compiles

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