Code Monkey home page Code Monkey logo

nuxt-single-file-exporter's Introduction

nuxt-single-file-exporter

badge badge badge badge badge

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 nuxt-single-file-exporter
  2. Add the module to your nuxt.config.ts file:
import { defineNuxtConfig } from 'nuxt'
import NuxtSingleFileExporter from 'nuxt-single-file-exporter'

export default defineNuxtConfig({
  modules: [
    NuxtSingleFileExporter
  ],

  // THIS IS ALSO REQUIRED!
  vite: {
    build: {
      rollupOptions: {
        output: {
          manualChunks: () => 'everything.js'
        }
      }
    }
  }
})
  1. If you now run pnpm generate you will find the generate file under .output/inline/index.html.

Config Options

Key Type Default Description
assetsInlineLimit number null 10000 The maximum size in kb of images to be inlined. Set to null to disable.
forceEnable boolean false Force the module to be enabled even in development mode.
skipViteConfiguration boolean false Skip vite configurations. Not recommended because this can lead to chunk splitting which causes sometimes errors.
failOnError boolean false Fail on error instead of displaying a warning.
publicDir string ./.output/public The output directory of nuxt.
outputDir string ./.output/inlined The directory where the generated files are stored.
inlineFiles[].path string null The path of the file to be inlined. Cant be set with inlineFiles[].glob at the same time.
inlineFiles[].glob string null The glob pattern of the files to be inlined. The path of the file to be inlined. Cant be set with inlineFiles[].path at the same time.
inlineFiles[].inline.imports boolean false The extensions of the files to be inlined. Experimental feature.
inlineFiles[].inline.require boolean false Whether to inline require() of the js files. Experimental feature.
inlineFiles[].inline.js boolean true Whether to inline the js.
inlineFiles[].inline.css boolean true Whether to inline the css.

Example Config

A full nuxt config could look like this:

import { defineNuxtConfig } from 'nuxt'
import NuxtSingleFileExporter from 'nuxt-single-file-exporter'

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 'nuxt-single-file-exporter'

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

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

Permissions Conditions Limitations
๐ŸŸข Commercial useThe licensed material and derivatives may be used for commercial purposes.
๐Ÿ”ต License and copyright noticeA copy of the license and copyright notice must be included with the licensed material.
๐Ÿ”ด LiabilityThis license includes a limitation of liability.
๐ŸŸข DistributionThe licensed material may be distributed.
๐Ÿ”ต State changesChanges made to the licensed material must be documented.
๐Ÿ”ด Trademark useThis license explicitly states that it does NOT grant trademark rights, even though licenses without such a statement probably do not grant any implicit trademark rights.
๐ŸŸข ModificationThe licensed material may be modified.
๐Ÿ”ด WarrantyThis license explicitly states that it does NOT provide any warranty.
๐ŸŸข Patent useThis license provides an express grant of patent rights from contributors.
๐ŸŸข Private useThe licensed material may be used and modified in private.

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

nuxt-single-file-exporter's People

Contributors

scolastico avatar

Stargazers

Florian Lefebvre avatar Daniel Roe avatar

Watchers

 avatar

nuxt-single-file-exporter's Issues

Cant be loaded externally.

import { NuxtSingleFileExporter } from 'nuxt-single-file-exporter'
// or
import NuxtSingleFileExporter from 'nuxt-single-file-exporter'

Results in:

TS2307: Cannot find module 'nuxt-single-file-exporter' or its corresponding type declarations.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.