Integrating Petite-vue with Hugo

Petite-vue is great for JAMstack, but we have to integrate Petite-vue with Hugo manually.

Version

Hugo 0.92
Petite-Vue 0.4

Create New Site

$ hugo new site hugo-vue --format json

hugo new site : create a new site with default skeloton
--format json : use JSON as Hugo config format

Add Packages

$ npm install -D petite-vue prettier npm-run-all

petite-vue : for Petite-vue
prettier : code formatter for HTML/CSS/JavaScript
npm-run-all : run NPM scripts in sequential or in parallel

Prettier

WebStorm -> Preferences -> Language & Frameworks -> Prettier

Prettier package : WebStorm will get a path automatically after installing Prettier
Rule for files : add html for Prettier to work with TailwindCSS
On Reformat Code action : run Prettier with the default Reformat code action
On save : run Prettier on save

After checking On Reformat Code action and On save, Prettier works as the default code formatter instead of WebStorm internal formatter

Layout

layouts/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="vue.js" defer init></script>
    <title>Hello Hugo</title>
  </head>
  <body>
    <div>Hello Petite-vue</div>
    <div v-scope="{ count: 0 }">
      <button @click="count++">+</button>
      <span v-text="count" />
    </div>
  </body>
</html>

Line 6

<script src="vue.js" defer init></script>

Only reference the local path of Petite-vue so that we can run Hugo locally without an internet connection.

Line 11

<div v-scope="{ count: 0 }">
  <button @click="count++">+</button>
  <span v-text="count"/>
</div>

Classical counter implemented by Petite-vue.

NPM Config

package.json

{
  "scripts": {
    "dev:vue": "cp node_modules/petite-vue/dist/petite-vue.iife.js static/vue.js",
    "dev:hugo": "hugo server",
    "dev": "run-p dev:*",
    "build:vue": "cp node_modules/petite-vue/dist/petite-vue.iife.js static/vue.js",
    "build:hugo": "hugo",
    "build": "run-s build:*"
  },
  "devDependencies": {
    "npm-run-all": "^4.1.5",
    "petite-vue": "^0.4.1",
    "prettier": "^2.5.1"
  }
}

Line 6

"dev:vue": "cp node_modules/petite-vue/dist/petite-vue.iife.js static/vue.js",

Copy Petite-vue from node_modules to static folder.

Line 7

"dev:hugo": "hugo server",

Run web server by Hugo.

Line 5

"dev": "run-p dev:*",

run-p : run all dev:* in parallel under development mode.

Line 6

"build:vue": "cp node_modules/petite-vue/dist/petite-vue.iife.js static/vue.js",

Copy minimized Petite-vue from node_modules to static folder.

Line 7

"build:hugo": "hugo",

Build markdown to the public folder by Hugo.

Line 8

"build": "run-s build:*"

run-s : run all build:* in sequential under production mode.

Development Mode

$ npm run dev

Start web server under development mode.

Petite-vue with Hugo is enabled successfully under development mode.

Production Mode

$ npm run build
$ serve public

Build Hugo under production mode
Use serve to run web server

Petite-vue with Hugo is enabled successfully under production mode.

Conclusion

By integrating Petite-vue with Hugo, we can use JavaScript on HTML in declarative style