gulp-vue-ssg

Gulp plugin for Vue3 static site generation (SSG).

This plugin compiles .vue files (using esbuild) and performs static site generation for client hydration.

License

MIT © Mu-Tsun Tsai

Install

npm install gulp-vue-ssg --save-dev

Usage

import gulp from 'gulp';
import ssg from 'gulp-vue-ssg';

// Or you can use any Vue3 plugin of your choice.
import esVue from 'esbuild-plugin-vue-next';

export default () => gulp.src('src/index.htm')
	.pipe(ssg({
		appRoot: 'src/app.vue',
		esbuildOptions: {
			plugins: [esVue()]
		},

		/**
		 * Where to inject the compiled result. Optional.
		 * Default value is `__VUE_SSG__`.
		 */
		injectTo: '__VUE_SSG__',

		/**
		 * Optional. If specify, additional operations will
		 * be applied to the app.
		 */
		appOptions: app => app.use(something),

		/**
		 * Whether DOM is needed during generation. Optional.
		 * Default value is `false`.
		 *
		 * In theory, SSG generation is not supposed to depend
		 * on DOM, but your app may depend on a package that
		 * throws errors if DOM is not available, and in those
		 * cases you can set this to true to make things work.
		 *
		 * You need to install optional dependency `jsdom` and
		 * `global-jsdom` to use this.
		 */
		useDOM: true,
	}))
	.pipe(gulp.dest('dist'));

And this plugin will bundle and compile src/app.vue and inject the result to __VUE_SSG__ in src/index.htm.