Build a Nuxt app into a single HTML file.
For most websites, bundling your entire web application into a single file is generally NOT RECOMMENDED. However, in certain scenarios, this can be useful, such as:
In these special cases, nuxt-single-html
allows you to leverage the powerful development experience of Nuxt while easily bundling your web app into a single HTML file, even supporting page pre-rendering.
This module is specifically designed to work with Nuxt. If you are looking for a similar solution for other frameworks, consider using vite-plugin-singlefile.
Install the module to your Nuxt application with one command:
npx nuxi module add nuxt-single-html
npm i -D nuxt-single-html
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['nuxt-single-html']
})
After installing, you can now build your Nuxt app into a single HTML now, no configuration required. Since nuxi build
does not prerender HTML files by default, you need to use nuxi generate
to generate the HTML files.
npx nuxi generate
The HTML file output path depends on your (nitro.output.publicDir
) Nuxt configuration. By default, it will be placed in the .output/public
directory.
You can define these options in your nuxt.config.js
file under the singleHtml
key.
export default {
modules: [
'nuxt-single-html'
],
singleHtml: {
enabled: true,
deleteInlinedFiles: true,
output: '[name].html'
}
}
enabled
(boolean)
nuxt generate
command.true
deleteInlinedFiles
(boolean)
true
output
(string)
[name]
to refer to the original HTML file name.'[name].html'
All assets (images, fonts, CSS, etc.) inside the assets/
directory will be inlined into the single HTML file. However, assets inside the public/
directory will not be inlined. For more details, please refer to the Nuxt Assets documentation.
If you’re using Nuxt Pages, multiple single HTML files may be generated for each route. Each HTML file contains the full source code for all route pages, meaning they can operate independently and still support SPA behavior. The only difference is that each HTML file is pre-rendered for its corresponding route.
Simply put, if you only need index.html
as your entry point, you can deploy just the index.html
and able to safely ignore the other HTML files. You can also check out config memory history mode to fit your needs.
# Install dependencies
pnpm install
# Generate type stubs
pnpm dev:prepare
# Develop with the playground
pnpm play
# Build and preview the playground with single-html module
pnpm play:generate
pnpm play:preview
# Run ESLint
pnpm lint
pnpm lint:fix
# Release new version
pnpm release