Symfony4でVue.jsを使う
必要なものをインストールして、
$ yarn add --dev vue vue-loader vue-template-compiler
webpack.config.js
の修正。
Encore
// ...
.enableVueLoader()
;
これだけで使えるようになる。
Hello world的なところまでやってみる。
エントリーポイントは assets/js/app.js
。
Symfony4のフロントエンド環境構築 - Tomcky's blog
assets/js/app.js
の作成。
import Vue from 'vue'; import MyComponent from './MyComponent'; new Vue({ el: '#example', components: { MyComponent }, template: '<MyComponent/>' });
assets/js/MyComponent.vue
の作成。
<template> <div class="example">{{ msg }}</div> </template> <script> export default { data () { return { msg: 'Hello world!' } } } </script> <style> .example { color: red; } </style>
表示させたいTwigテンプレートを修正。
{# 下の一行を任意の箇所に追加 #} <div id="example"></div>
yarn run
する。
$ yarn run encore dev
赤字で"Hello world"が表示されるはず。
このあたりは最低でもコンポーネントに対する理解がないとツライ。
ので、この辺りを読んどくといい。
コンポーネント — Vue.js
単一ファイルコンポーネント — Vue.js
Vue Component の仕様 · vue-loader
vue.jsのcomponentをwebpackで.vueにして単一ファイルコンポーネントにする - Qiita