Symfony UX

You can use Symfony UX components in your application. The symfony/ux-react, symfony/ux-vue and symfony/ux-svelte components require some adjustments. See their dedicated sections.

UX packages	Compatibility	UX packages	Compatibility
ux-autocomplete	✅	ux-svelte	✅ (*)
ux-chartjs	✅	ux-swup	✅
ux-cropperjs	✅	ux-toggle-password	✅
ux-dropzone	✅	ux-translator	✅
ux-lazy-image	✅	ux-turbo	✅
ux-live-component	✅	ux-twig-component	✅
ux-notify	✅	ux-typed	✅
ux-react	✅ (*)	ux-vue	✅ (*)
ux-map	Not yet tested (**)	ux-icons	✅
ux-leaflet-map	Not yet tested (**)	ux-google-map	Not yet tested (**)
ux-turbo-mercure	Not yet tested (**)

(*) requires some modifications with imports (see below)

(**) in theory there is no reason why it is not compatible, your feedback is welcome.

Prerequisites

composer require symfony/stimulus-bundle

# remove the webpack-compatible @symfony/stimulus-bridge
npm rm @symfony/stimulus-bridge

symfony/ux-vue

Basic installation

composer require symfony/ux-vue
npm i --force

After installing the Flex recipe from symfony/ux-vue you will need to correct these lines.

assets/bootstrap.js

import { registerVueControllerComponents } from '@symfony/ux-vue'; 
registerVueControllerComponents(require.context('./vue/controllers', true, /\.vue$/)); 

import { startStimulusApp, registerControllers } from "vite-plugin-symfony/stimulus/helpers"
import { registerVueControllerComponents } from "vite-plugin-symfony/stimulus/helpers/vue"

// register Vue components before startStimulusApp
registerVueControllerComponents(import.meta.glob('./vue/controllers/**/*.vue')) 

const app = startStimulusApp();
registerControllers(
  app,
  import.meta.glob(
    "./controllers/*_controller.js",
    {
      query: "?stimulus",
      eager: true,
    },
  ),
);

assets/bootstrap.ts

import { registerVueControllerComponents } from '@symfony/ux-vue'; 
registerVueControllerComponents(require.context('./vue/controllers', true, /\.vue$/)); 

import { startStimulusApp, registerControllers } from "vite-plugin-symfony/stimulus/helpers"
import { registerVueControllerComponents, type VueModule } from "vite-plugin-symfony/stimulus/helpers/vue"

// register Vue components before startStimulusApp
registerVueControllerComponents(import.meta.glob<VueModule>("./vue/controllers/**/*.vue")); 

const app = startStimulusApp();
registerControllers(
  app,
  import.meta.glob<StimulusControllerInfosImport>(
    "./controllers/*_controller.ts",
    {
      query: "?stimulus",
      eager: true,
    },
  ),
);

// vite.config.js
import { defineConfig } from 'vite'

import symfonyPlugin from 'vite-plugin-symfony';
import vuePlugin from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [
    vuePlugin(), 
    symfonyPlugin({
      stimulus: true
    }),
  ],
  build: {
    rollupOptions: {
      input: {
        "app": "./assets/app.js",
      }
    },
  },
});

{# your-template.html.twig #}
<div {{ vue_component('Hello', { 'name': 'Vite & Stimulus' }) }}></div>

<!-- assets/vue/controllers/Hello.vue -->
<template>
    <div>Hello {{ name }}!</div>
</template>

<script setup>
    defineProps({
        name: String
    });
</script>

Documentation : Symfony doc, Symfony UX.

symfony/ux-react

Basic installation

composer require symfony/ux-react
npm i --force

After installing the Flex recipe from symfony/ux-react you will need to correct these lines.

assets/bootstrap.js

import { registerReactControllerComponents } from '@symfony/ux-react'; 
registerReactControllerComponents(require.context('./react/controllers', true, /\.(j|t)sx?$/)); 

import { startStimulusApp, registerControllers } from "vite-plugin-symfony/stimulus/helpers"
import { registerReactControllerComponents } from "vite-plugin-symfony/stimulus/helpers/react"

registerReactControllerComponents(import.meta.glob('./react/controllers/**/*.js(x)\?')); 

const app = startStimulusApp();
registerControllers(
  app,
  import.meta.glob(
    "./controllers/*_controller.js",
    {
      query: "?stimulus",
      eager: true,
    },
  ),
);

assets/bootstrap.ts

import { registerReactControllerComponents } from '@symfony/ux-react'; 
registerReactControllerComponents(require.context('./react/controllers', true, /\.(j|t)sx?$/)); 

import { startStimulusApp, registerControllers } from "vite-plugin-symfony/stimulus/helpers"
import { registerReactControllerComponents, type ReactModule } from "vite-plugin-symfony/stimulus/helpers/react"

// register your React components before startStimulusApp
registerReactControllerComponents( 
  import.meta.glob<ReactModule>("./react/controllers/**/*.ts(x)?"), 
); 

const app = startStimulusApp();
registerControllers(
  app,
  import.meta.glob<StimulusControllerInfosImport>(
    "./controllers/*_controller.ts",
    {
      query: "?stimulus",
      eager: true,
    },
  ),
);

Because registerReactControllerComponents was invoked with import.meta.glob in lazy mode, you need to define in your controllers.json fetch eager (otherwise you will have promise nesting).

{
    "controllers": {
        "@symfony/ux-react": {
            "react": {
                "enabled": true,
                "fetch": "eager"
            }
        },

    },
    "entrypoints": []
}

// vite.config.js
import { defineConfig } from 'vite'

import symfonyPlugin from 'vite-plugin-symfony';
import reactPlugin from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [
    reactPlugin(), 
    symfonyPlugin({
      stimulus: true
    }),
  ],
  build: {
    rollupOptions: {
      input: {
        "app": "./assets/app.js",
      }
    },
  },
});

{# base.html.twig #}
{{ vite_entry_link_tags('app') }}
{{ vite_entry_script_tags('app', {
    dependency: 'react'
  }) }}

{# your-template.html.twig #}
<div {{ react_component('Hello', { 'fullName': 'Vite & Stimulus' }) }}></div>

// assets/react/controllers/Hello.jsx
import React from 'react';

export default function (props) {
    return <div>Hello {props.fullName}</div>;
}

Documentation : Symfony doc, Symfony UX React.

symfony/ux-svelte

Basic installation

composer require symfony/ux-svelte
npm i --force

After installing the Flex recipe from symfony/ux-svelte you will need to correct these lines.

assets/bootstrap.js

import { registerSvelteControllerComponents } from '@symfony/ux-svelte'; 
registerSvelteControllerComponents(require.context('./svelte/controllers', true, /\.svelte$/)); 

import { startStimulusApp, registerControllers } from "vite-plugin-symfony/stimulus/helpers"
import { registerSvelteControllerComponents } from "vite-plugin-symfony/stimulus/helpers/svelte"
registerSvelteControllerComponents(import.meta.glob('./svelte/controllers/**/*.svelte')); 

const app = startStimulusApp();
registerControllers(
  app,
  import.meta.glob(
    "./controllers/*_controller.js",
    {
      query: "?stimulus",
      eager: true,
    },
  ),
);

assets/bootstrap.ts

import { registerSvelteControllerComponents } from '@symfony/ux-svelte'; 
registerSvelteControllerComponents(require.context('./svelte/controllers', true, /\.svelte$/)); 

import { startStimulusApp, registerControllers } from "vite-plugin-symfony/stimulus/helpers"
import { registerSvelteControllerComponents, type SvelteModule } from "vite-plugin-symfony/stimulus/helpers/svelte"

registerSvelteControllerComponents( 
  import.meta.glob<SvelteModule>("./svelte/controllers/**/*.svelte"), 
); 

const app = startStimulusApp();
registerControllers(
  app,
  import.meta.glob<StimulusControllerInfosImport>(
    "./controllers/*_controller.ts",
    {
      query: "?stimulus",
      eager: true,
    },
  ),
);

Because registerSvelteControllerComponents was invoked with import.meta.glob in lazy mode, you need to set in your controllers.json fetch eager (otherwise you will have promise nesting).

{
    "controllers": {
        "@symfony/ux-svelte": {
            "svelte": {
                "enabled": true,
                "fetch": "eager"
            }
        },

    },
    "entrypoints": []
}

// vite.config.js
import { defineConfig } from 'vite'

import symfonyPlugin from 'vite-plugin-symfony';
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  plugins: [
    svelte(), 
    symfonyPlugin({
      stimulus: true
    }),
  ],
  build: {
    rollupOptions: {
      input: {
        "app": "./assets/app.js",
      }
    },
  },
});

// svelte.config.js
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'

export default {
  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
  // for more information about preprocessors
  preprocess: vitePreprocess(),
}

{# your-template.html.twig #}
<div {{ svelte_component('Hello', { 'name': 'Vite & Stimulus' }) }}></div>

<!-- assets/svelte/controllers/Hello.svelte -->
<script>
    export let name = "Svelte";
</script>

<div>Hello {name}</div>

Documentation : Symfony doc, Symfony UX Svelte.