Visualforce上でVue.jsは使えるか？ | Breaking Codes - クラウド開発の検証やサンプルコード

Vue.js を使うには、CDN の必要な Javascript ファイルを一つ指定するだけなので、例えば

<apex:page>
  <div id="app">
    This is an {{param1}}.
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({ el: '#app', data: { param1: 'Orange' } });
  </script>
</apex:page>

とすれば、何も困らず Vue.js は Visualforce 上で動きます。

結果

This is an Orange.

v-if も使えます。

<apex:page>
  <div id="app">
    <template v-if="param1 == 'Apple'">
      Apple
    </template>
    <template v-else-if="param1 == 'Orange'">
      Orange
    </template>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({ el: '#app', data: { param1: 'Orange' } });
  </script>
</apex:page>

結果

Orange

問題は、v-bind、v-on、v-slot　等です。

<apex:page>
  <div id="app">
    <div v-bind:style="myStyle">
      Param1: {{param1}}
    </div>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
    var app = new Vue({ el: '#app', data: { param1: 'Orange', myStyle: {
    fontSize: '16px' } } });
  </script>
</apex:page>

のように書くと、

Error Parsing /apex/vueTest: Error Traced[line: 3] The prefix "v-bind" for attribute "v-bind:style" associated with an element type "div" is not bound.

というエラーになります。

これを回避するために、html の xmln 属性で、v-bind、v-on、v-slot　等を使用できるよう定義してあげます。

<apex:page>
  <html
    xmlns:v-bind="http://vuejs.org"
    xmlns:v-on="http://vuejs.org"
    xmlns:v-slot="http://vuejs.org"
  >
    <div id="app">
      <div v-bind:style="myStyle">
        Param1: {{param1}}
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      var app = new Vue({ el: '#app', data: { param1: 'Orange', myStyle: {
      fontSize: '3rem', color: 'red' } } });
    </script>
  </html>
</apex:page>

結果

Param1: Orange

まとめ

Visualforce 上で Vue.js を使う場合は、

<apex:page>
  <html
    xmlns:v-bind="http://vuejs.org"
    xmlns:v-on="http://vuejs.org"
    xmlns:v-slot="http://vuejs.org"
  >
    <!--
        Visualforceコンテンツ
        -->
  </html>
</apex:page>

の記述が最低限必要そう。ただし、v-bind:style を :style としたり、v-on:click を @click のように書く省略記法は利用できない。