Symfony4でVue.jsを使う

Vue.js Symfony

symfony.com

必要なものをインストールして、

$ 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