Vue.jsのデリミタ(delimiters)を変更する方法

最近はCMSとVue.jsを併用する機会も増えてきたと思います。 そのまま使おうとするとCMS側の変数を展開する記法とVue.js側の記法が被ってしまします。 その場合、Vue.js側の記法を変更することが出来ますので変更してみたいと思います。

では早速公式サイトのマニュアルを見てみたいと思います。

API — Vue.js(delimiters)

公式サイトを見てみると例はこちらとなっていますね。

new Vue({
 delimiters: ['${', '}']
})

CMSと併用することを考えると{}自体を避けた方が良いのかな?
と思いますのでこちらの方が良いかもしれません。

delimiters: ['[[', ']]']

delimiters: ['<%', '%>']

といった形で任意の形式に変更することが可能です。

最近の作業ではa-blog cms、craft CMSで被っており変更した印象があります。 Vue.jsを使う事でCMSの表現出来る幅も広がると思いますので積極的に取り入れて行きたいですね。


関連するタグ

この記事を書いた人

たむら しょうご

HTML&CSSコーダー

ウェブアクセシビリティ対応、フロントエンド開発、CMSを利用したウェブサイト制作を担当しています。
趣味はガーデニングです。

ましじめのスキルが必要ですか?

遠慮なくご相談ください。我々はあなたのプロジェクトに最善を尽くし、あなたのウェブサイトの制作を強力にサポートいたします。

お問い合わせはこちらから