Vue3のデリミタを変更する

bigface0202 2022/10/25に更新

動機

PythonのFlaskをバックエンドとして、Vue.jsの開発を行いたかった。
いざ始めてみると、Flaskのデリミタも{{}}で衝突することがわかった。
そのため、Vue側のデリミタの変更を行う必要がでてきた。

bigface0202 2022/10/25

解決策

vue.config.jsを以下のように変更する

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  outputDir: 'dist',
  assetsDir: 'static',
  indexPath: 'templates/index.html',
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.compilerOptions = { 
          whitespace: 'condense',
          delimiters: ['[[', ']]']
        };
        return options;
      });
  }
})

bigface0202 2022/10/25

ちなみに、outputDir、assetDir、indexPathの部分はなくても良い。
大事なのはchainWebpack以下の部分。

bigface0202 2022/10/25に更新

他に試したこと

main.js

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.config.compilerOptions.delimiters = ['[[', ']]']
app.mount('#app')

これをやると
The compilerOptions config option is only respected when using a build of Vue.js that includes the runtime compiler (aka "full build"). Since you are using the runtime-only build, compilerOptions must be passed to @vue/compiler-dom in the build setup instead.
と表示されて、デリミタは変わらない。
ただ、このエラーのお陰で解決策に辿り着けた。