vue.js x vuetifyをSalesforceに導入する方法

こんにちは。
Salesforceのvisualforce上でvue.js及びvuetifyを利用できるようにしました。
導入方法をご紹介します。

1. 必要ソースのダウンロード

2. Salesforceでの設定

  • 1.でダウンロードしたファイルをSalesforceに静的リソースとしてアップする。

3. Visualforceページ上で利用設定

例:

    <apex:includeScript value="{!URLFOR($Resource.vue_js_x_x_x , '/vue-x.x.x/dist/vue.min.js')}"/>
    <apex:stylesheet value="{!URLFOR($Resource.material_icon_css)}"/>
    <apex:stylesheet value="{!URLFOR($Resource.vuetify_x_x_x, 'vuetify-vx.x.x.min.css')}"/>
    <apex:includeScript value="{!URLFOR($Resource.vuetify_x_x_x, 'vuetify-vx.x.x.js')}"/>

※x部分:バージョン番号を指定

SF独自の注意事項

1.v-bindとv-onタグの名前空間の定義が必要

※定義しないと保存時にエラーになる。

  • 書き方例
<html xmlns:v-bind="http://vue.org" xmlns:v-on="http://vue.org">

2.省略記法は利用できない。

※利用すると保存時にエラーになる。

  • エラーになる例
<v-btn small>test</v-btn>
<v-btn @click="hoge()>test</v-btn>
<v-data-table :headers="njb_headers" :items="njb_items" :search="search">
</v-data-table>
  • エラーにならない例
<v-btn small="true"> test</v-btn>
<v-btn v-on:click="hoge()>test</v-btn>
<v-data-table v-bind:headers="njb_headers" v-bind:items="njb_items" :search="search">
</v-data-table>

3.vuetifyを使う場合、下記オプションをつけること。

<apex:page standardStylesheets="false" >

※オプション無しだとSalesforce側で標準のCSSが優先設定される。

例:下記の記載をすると

<template>
    <div>
        <v-btn color="primary">Success</v-btn>
        <v-btn color="error">Error</v-btn>
        <v-btn color="warning">Warning</v-btn>
        <v-btn color="info">Info</v-btn>
    </div>
</template>

保存はできますが、下記のようにvuetify側のCSSがうまくあたらなくなります。buttonに対してSalesforce側のCSSが設定されてることが影響しています。

設定すると通常通り表示されます。

最後に

フロント開発したいけど、Salesforce ではVue.jsが利用できない、そもそもフロント開発ができないと思っていませんか?
王道の通りにはいかない事もありますが、今回のように、やろうと思えばSalesforce上でもwebフロント開発の知識を活かした画面の構築はできるケースも多数あると思います。
興味にある方は諦める前に是非一度チャレンジしてみてください!

Pocket
LINEで送る