How to configure delimiters in vue.js version 3+ using build tools?

Question

I was stuck with this for a while.

The official site gave this:

// Delimiters changed to ES6 template string style
app.config.compilerOptions.delimiters = ['${', '}']

but it doesn't work for build setup only as mentioned in the site.. it only works for standalone vue.js

Answer 1

Posting @Emperorsum's own answer here:

Anyway this finally worked:

Editing vite.config.js thus:

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue({
    template:{
      compilerOptions: {
        delimiters: ["[[","]]"]
      }
    }
  })],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))    
    }
  },
})