A Jekyll project template that uses Vue.js single file components complete with webpack bundling and optimizations.

jekyll-vue-template is an opinionated, but minimal boilerplate for creating statically generated sites with Jekyll and Vue.js. It supports Vue single file components and webpack optimizations including code-splitting and cache-control.

• Support for Vue single file components
• Vendor code-splitting with webpack 4
• Cache control for bundled assets using webpack 4
• Babel transpilation
• Sass language support in Vue single file components
• eslint with Vue style guide plugin
• Hot-reloading via BrowserSync

The easiest way to use the jekyll-vue-template is to clone or fork this repo, then customize it to suit your needs.

npm i

bundle

The src directory contains the Vue application and its components. Create single file components and mount them anywhere in your Jekyll pages, including layouts, markdown pages, or includes.

To run the jekyll-vue-template in a development environment, first compile assets with webpack:

npm run dev

Alternatively you can use the watch command to watch for changes in your webpack-managed assets and automatically recompile.

npm run watch

After assets have been built, spool up a development server with Jekyll:

bundle exec jekyll s

To build for production, first compile webpack assets:

npm run build

After assets have been built, generate the static files with Jekyll:

bundle exec jekyll build

jekyll-vue-template uses the following projects as critical workflow components:

• Jekyll v4.0.0
• Vue v2.6.10
• webpack v4.39.3

MIT © Christopher Murphy

Jekyll License Info

Vue.js License Info