How To

Tip

View the source code of webfonts extension which makes use of Vue.js

Tip

When backend debugging $GLOBALS['TYPO3_CONF_VARS']['BE']['debug'] is enabled Vue.js will log debug information to JavaScript console.

Controller

Your controller must extend \VUEJS\Vuejs\Controller\VueBackendController

class YourController extends \VUEJS\Vuejs\Controller\VueBackendController
{

}

Use Vue.js as RequireJS module

Important

Learn how to use RequireJS modules in TYPO3 backend first.

Setup a HTML element where the Vue app should get attached to within your Templates.

<f:be.pageRenderer
    includeRequireJsModules="{
        1000: 'TYPO3/CMS/Yourext/MyAppComponent'
    }"
/>

<div id="my-vue-app">
    ...
</div

Create a RequireJS module /yourext/Resources/Public/JavaScript/MyApp.js

define([
    'vue',
], function () {
    'use strict';

    var app = new Vue({
        el: '#my-vue-app',
        data: {
            ...
        },
        computed: {
            ...
        },
        methods: {
            ...
        },
    });
    return app;
});

Components

Extend your Template file like this

<f:be.pageRenderer
     includeRequireJsModules="{
         10: 'TYPO3/CMS/Yourext/MyComponent',
         1000: 'TYPO3/CMS/Yourext/MyApp'
     }"
 />

<script type="text/x-template" id="my-vue-component">
   <div>
      ...
   </div>
</script>

<div id="my-vue-app">
     ...
</div

Create a requireJS module for each component /yourext/Resources/Public/JavaScript/MyComponent.js

define([
    'TYPO3/CMS/Yourext/MyApp'
    'vue',
], function (myApp) {
    'use strict';

    return Vue.component('my-vue-component',
        {
            template: '#my-vue-component',
            data: function () {
                return {}
            },
            props: [],
            methods: {
                doSomething: function() {
                    console.log(myApp); // use myApp reference in component
                }
            },
        }
    );
});