nuxt-single-file-exporter v0.0.0

nuxt-single-file-exporter

About

Yes, it is actually not a good idea to export nuxt projects to a single file, but in rare cases this is actually used. For example, javascript files cannot be loaded locally by the most browsers due to cors. Also, it is more convenient for e.g. documentation to be able to send it as a single file instead of a whole archive.

Functions:

• All js, css are packed into a single html file.
• Images can theoretically also be packed in base64.
• Easy to implement in nuxt.

Disadvantages:

• Generally it can lead to bugs.

Limitations:

• As there seems to be (if im wrong created an issue) no hook from nuxt 3 currently which is triggered when something is generated only for an export, this module uses the vue production value. Since nuxt automatically activates this setting during build, this should not interfere. You can also force the module to try to export a new html file at the end of each build process.
• Not tested but im sure there could be issues with complex and large apps.
• Because the module depends on vite as builder, it is not possible to use this module with webpack aka nuxt 2.
• The nuxt router can't resolve the path for the exported file. Because of this the nuxt router can't be used, and you should instead a single app.vue file instead of the pages folder.

Usage

Install

1. Install the package <to-be-updated>
2. Add the module to your nuxt.config.ts file:

import { defineNuxtConfig } from 'nuxt'
import NuxtSingleFileExporter from '<to-be-updated>'

export default defineNuxtConfig({
  modules: [
    NuxtSingleFileExporter
  ],

  // THIS IS ALSO REQUIRED!
  vite: {
    build: {
      rollupOptions: {
        output: {
          manualChunks: () => 'everything.js'
        }
      }
    }
  }
})

3. If you now run pnpm generate you will find the generate file under .output/inline/index.html.

Config Options

Example Config

A full nuxt config could look like this:

import { defineNuxtConfig } from 'nuxt'
import NuxtSingleFileExporter from '<to-be-updated>'

export default defineNuxtConfig({
  
  modules: [
    NuxtSingleFileExporter
  ],

  singleFileExporter: {
    assetsInlineLimit: 10000,
    forceEnable: false,
    skipViteConfiguration: false,
    failOnError: false,
    publicDir: './.output/public',
    outputDir: './.output/inlined',
    inlineFiles: [
      {
        path: 'index.html',
        inline: {
          require: false,
        }
      },
      {
        glob: 'docs/**/*.html'
        // If inline (or its suboptions) is undefined the missing options
        // will be set to their default values.
      }
    ]
  },
  
  vite: {
    build: {
      rollupOptions: {
        output: {
          manualChunks: () => 'everything.js'
        }
      }
    }
  }
  
})

Small notice if you specify a file multiple times, the last one will override the previous ones.

If you want to inline all html files the short config could look like this:

import { defineNuxtConfig } from 'nuxt'
import NuxtSingleFileExporter from '<to-be-updated>'

export default defineNuxtConfig({
  
  modules: [
    NuxtSingleFileExporter
  ],

  singleFileExporter: {
    inlineFiles: [{ glob: '**/*.html' }]
  },

  vite: {
    build: {
      rollupOptions: {
        output: {
          manualChunks: () => 'everything.js'
        }
      }
    }
  }
  
})

Development

Any help is welcome. This project is unfortunately not one of my main projects, so I probably won't do regular updates. However, I will gladly accept push requests. (And yes I even reply to pr's not like about 50% of GitHub).

Requirements

• node.js 16.x
• pnpm

Installation

• Run pnpm i && cd playground && pnpm i --shamefully-hoist && cd.. to install all dependencies of the module.

Usage

• Use pnpm dev:generate to export an inline html file of the playground.

License

This project is licensed under the Apache License 2.0.

About

Apache-2.0

A permissive license whose main conditions require preservation of copyright and license notices. Contributors provide an express grant of patent rights. Licensed works, modifications, and larger works may be distributed under different terms and without source code.

What you can do

Information provided by https://choosealicense.com/licenses/apache-2.0/