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
}
},
}
);
});