I am using Vite with Vue 3 and vue-i18n. The site has html formatted pages which need to be displayed in the appropriate locale.
When loading the locale files I get [plugin:unplugin-vue-i18n] Detected HTML in '...' message.
where ... is a message containing html markup - even though I set sanitizeHtml: false
.
My vite.config.js is
// Plugins
import vue from '@vitejs/plugin-vue'
import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'
import vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
// Utilities
import { resolve, dirname } from 'node:path'
import { defineConfig } from 'vite'
import { fileURLToPath, URL } from 'node:url'
// https://vitejs.dev/config/
export default defineConfig({
optimizeDeps: {
include: ['@intlify/vite-plugin-vue-i18n']
},
build: {
rollupOptions: {
output: {
sanitizeHtml: false,
},
},
},
plugins: [
vue({
template: { transformAssetUrls }
}),
// https://lokalise.com/blog/vue-i18n/#Installing_and_configuring_the_Vue_I18n_plugin
VueI18nPlugin({
include: resolve(dirname(fileURLToPath(import.meta.url)), './src/i18n/locales/**'), // provide a path to the folder where you'll store translation data (see below)
}),
// https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
vuetify({
autoImport: true,
styles: {
configFile: 'src/styles/settings.scss',
},
}),
],
define: { 'process.env': {} },
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
},
extensions: [
'.js',
'.json',
'.jsx',
'.mjs',
'.ts',
'.tsx',
'.vue',
],
},
server: {
port: 3000,
},
})