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 Image Cropper UX package

Image Cropper

Form Type and tools for cropping images

Image for the Stylized Dropzone UX package

Stylized Dropzone

Form type for stylized "drop zone" for file uploads

Image for the Notify UX package

Notify

Trigger native browser notifications from inside PHP

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