Skip to content
A starter template for Jekyll projects with Vue.js and Vue Single File Components, complete with webpack.
Ruby JavaScript HTML Vue
Branch: master
Clone or download
Christopher Murphy
Latest commit eb38cf1 Sep 1, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Documentation updates Apr 3, 2018
.misc Documentation updates Apr 3, 2018
_includes Cleared gitignore cache, updated webpack to 4.6.0 Apr 22, 2018
_layouts webpack with Vue SFC integration Apr 2, 2018
_posts Initial commit Mar 30, 2018
src chore: upgrade to vue-loader v15 Jun 6, 2018
.babelrc chore(deps): upgrade clean-webpack-plugin from v1 to v3 Aug 31, 2019
.editorconfig Eslint Apr 4, 2018
.eslintignore Eslint Apr 4, 2018
.eslintrc.js Eslint Apr 4, 2018
.gitattributes Initial commit Mar 30, 2018
.gitignore Cleared gitignore cache, updated webpack to 4.6.0 Apr 22, 2018
404.html Initial commit Mar 30, 2018
CHANGELOG.md docs: update CHANGELOG Jan 6, 2019
Gemfile chore(deps): upgrade jekyll v3.8 -> v4.0, various gems Aug 31, 2019
Gemfile.lock chore(deps): upgrade jekyll v3.8 -> v4.0, various gems Aug 31, 2019
LICENSE Initial commit Mar 30, 2018
README.md
_config.yml chore(deps): upgrade jekyll v3.8 -> v4.0, various gems Aug 31, 2019
about.md webpack with Vue SFC integration Apr 2, 2018
browser-sync.js feat: add live-reloading using Browsersync Jul 8, 2018
index.md Package updates, cleanup Apr 4, 2018
package-lock.json chore(deps): upgrade sass-loader v7.1.0 -> v8.0.0 Aug 31, 2019
package.json chore(deps): upgrade sass-loader v7.1.0 -> v8.0.0 Aug 31, 2019
webpack.config.babel.js chore(deps): upgrade css-loader v2.1.1 -> v3.2.0 Aug 31, 2019

README.md

Jekyll and Vue logos

jekyll-vue-template

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

Overview

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.

Features

  • 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

Installation

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

Install npm Packages

npm i

Install Ruby Gems

bundle

Usage

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.

Development

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

Production

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

Technical

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

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

License

MIT © Christopher Murphy

Jekyll License Info

Vue.js License Info

You can’t perform that action at this time.