Export to single JS file
I'm trying to build a SPA application that I want to host on Netlify/Vercel/something, but I want to load the SPA elsewhere. I already watched Alexander Lichter's excellent video "Building a plain SPA with Nuxt!?" (https://www.youtube.com/watch?v=7Lr0QTP1Ro8) and implemented that to remove all of those things, but I still wan to simplify the generated output even more by exporting all js to one file and all css to another file.
I tried to consult with ChatGPT to help me update nuxt.config.ts, but so far all I'm getting is a console error saying the file can't be loaded due to it being the wrong MIME type. The two files do get generated, but they end up in .nuxt > dist > client instead of in .output > public > _nuxt. My best guess is that there is something wrong with my config file.
Anyone have any ideas on how to accomplish this?
Here's my nuxt.config.ts:
export default defineNuxtConfig({
devtools: { enabled: true },
ssr: false, // Disable server-side rendering
router: {
options: {
hashMode: true // Use hash mode for the router
}
},
hooks: {
"prerender:routes"({ routes }) {
routes.clear(); // Clear all routes to prevent prerendering
}
},
generate: {
fallback: true // Generate a fallback 404.html for client-side routing
},
vite: {
build: {
emptyOutDir: false,
rollupOptions: {
output: {
inlineDynamicImports: true, // Inline all dynamic imports
entryFileNames: 'everything.js', // Output filename for entry chunks
chunkFileNames: 'everything.js', // Output filename for additional chunks
assetFileNames: assetInfo => {
if (assetInfo.name && assetInfo.name.endsWith('.css')) {
return 'everything.css'; // Output filename for CSS assets
}
return '[name].[ext]'; // Default output filename for other assets
}
}
}
}
}
});
Alexander Lichter
YouTube
Building a plain SPA with Nuxt!?
🗝️ Single Page Applications are amazing! Sometimes you simply don't need SSR at all, especially when building behind authentication. While you can use plain Vue to build a fully client-side rendered application, Nuxt is also capable of building good old SPAs (unlike other meta frameworks 👀). In this video, you'll learn how it works, what you can...
0 Replies