Typo3 Ux Svelte

svenpet90

TYPO3 Extension "typo3-ux-svelte"

What does it do?

Render Svelte components directly in Fluid template

This Extensions enables you to render Svelte Components directly in Fluid templates. It acts as an integration for symfony/ux-svelte into TYPO3.

Installation

The recommended way to install the extension is by using Composer. In your Composer based TYPO3 project root, just run:

composer require svenpetersen/typo3-ux-svelte

Setup

Before you start, make sure you have EXT:typo3_encore. This extensions integrates Webpack Encore into TYPO3.

Follow the Symfony UX Vue official documentation.

Additionally:

# Add this line to your package.json dependencies:
"@symfony/ux-svelte": "file:vendor/symfony/ux-svelte/assets"

# Add these two lines to your app.js:
import { registerSvelteControllerComponents } from '@symfony/ux-svelte';
registerSvelteControllerComponents(require.context('./svelte/controllers', true, /\.svelte$/));

# Install Svelte
$ npm install svelte svelte-loader --save-dev

# or
$ yarn add svelte svelte-loader --dev

# Enable it in your webpack.config.js file:
Encore
    // ...
    .enableSvelte()
;

# Add these lines to your controllers.json:
"@symfony/ux-svelte": {
    "vue": {
        "enabled": true,
        "fetch": "eager"
    }
}

# run
$ npm install --force
$ npm run watch

# or
$ yarn install --force
$ yarn watch

Usage

In any fluid template: Just register the Namespace and use the provided ViewHelper to render your component:

<html xmlns:ux="http://typo3.org/ns/SvenPetersen/UX/Svelte/ViewHelpers">
    <div {ux:svelteComponent(name:'MyComponent',props:"{'name':'John Doe'}")}></div>
</html>

Contributing

Please refer to the contributing document included in this repository.

Top categories