When integrating modern JavaScript frameworks like Vue.js into an Umbraco project, having an efficient build setup is crucial. Vite, a next-generation frontend tooling solution, simplifies this process with its fast bundling, modern syntax support, and intuitive configuration. Below, we'll explore how to use the provided vite.config.js file to compile Vue.js into your Umbraco project.
Vue.js Plugin:
The configuration uses the @vitejs/plugin-vue plugin to process Vue single-file components (.vue). This is essential for a Vue project.
plugins: [vue()],
Alias for Vue Build:
The resolve.alias property maps 'vue' to the vue.esm-bundler build. This ensures Vue's full build (including template compilation) is available.
resolve: { alias: { 'vue': 'vue/dist/vue.esm-bundler', } },
Custom Build Output:
The build property customizes the output to match the Umbraco project structure:
- JavaScript files are placed in wwwroot/vue/scripts.
- CSS assets are in wwwroot/vue/css.
- The manualChunks method ensures efficient chunk splitting for dependencies
build: {
outDir: './wwwroot/vue',
rollupOptions: {
output: {
entryFileNames: 'scripts/[name].js',
chunkFileNames: 'scripts/[name].js',
assetFileNames: 'css/[name].min.[ext]',
}
}
},
Optimized Dependency Handling:
The optimizeDeps.exclude property excludes certain dependencies (like ionicons) from pre-bundling, preventing unnecessary overhead.
Steps to integrate:
Install Required Dependencies:
Begin by installing Vue.js and Vite's required plugins.
npm install vue @vitejs/plugin-vue
Place Your Vue Source Files:
Organize Vue source files under a directory like VueSrc. For example, Listing.js is specified as the entry point in the configuration.
Build Your Assets:
Run the Vite build command to compile Vue.js into your Umbraco project.
npm run build
Include in Umbraco Templates:
Link the compiled files in your Umbraco Razor templates or layouts:
<script type="module" src="/vue/scripts/Listing.js"></script>
<link rel="stylesheet" href="/vue/css/Listing.min.css">
Why Use Vite for Umbraco?
- Speed: Vite's lightning-fast builds and hot module replacement (HMR) enhance development efficiency.
- Customization: The granular control over output files ensures the assets integrate seamlessly into Umbraco's structure.
- Modern Tooling: Vite supports modern JavaScript features and Vue's latest advancements.
This configuration bridges the gap between modern JavaScript development and a robust CMS like Umbraco, enabling a smooth workflow for building dynamic, interactive applications.
Full vite.config.js file:
import { fileURLToPath, URL } from 'node:url'import { defineConfig } from 'vite'
import { resolve } from 'path'
import vue from '@vitejs/plugin-vue'
import { optimizeDeps } from './node_modules/vite/dist/node/index'// https://vitejs.dev/config/
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'vue': 'vue/dist/vue.esm-bundler',
//'vue': 'vue/dist/vue.runtime.esm-bundler',
//'@': fileURLToPath(new URL('./VueSrc', import.meta.url))
}
},
define: {
'process.env.NODE_ENV': JSON.stringify('development'),
},
build: {
minify: false,
mode: "development",
outDir: './wwwroot/vue',
chunkSizeWarningLimit: 2000,
rollupOptions: { input: {
Listing: resolve(__dirname, './VueSrc/Listing.js'),
},
output: { manualChunks(id) {
if (id.includes('node_modules/@')) {
return id.toString().split('node_modules/')[1].split('/')[0].toString();
}
},
entryFileNames: 'scripts/[name].js',
chunkFileNames: 'scripts/[name].js',
assetFileNames: 'css/[name].min.[ext]'
}
}
},
optimizeDeps: {
exclude: ['ionicons']
}
})
