2020.03.13
vue.js x vuetifyをSalesforceに導入する方法
こんにちは。
Salesforceのvisualforce上でvue.js及びvuetifyを利用できるようにしました。
導入方法をご紹介します。
1. 必要ソースのダウンロード
- vue.jsのsource code(zip)
https://github.com/vuejs/vue/releases/ - vuetify.jsのsource code(zip)
https://github.com/vuetifyjs/vuetify/releases/ - material icon用のCSS
https://fonts.googleapis.com/icon?family=Material+Icons
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フロント開発の知識を活かした画面の構築はできるケースも多数あると思います。
興味にある方は諦める前に是非一度チャレンジしてみてください！
