Creating a single JS file output

To configure Vue CLI to output a single .js file:

1. Disable CSS extraction with css.extract=false.
2. Disable Webpack's chunk-splitting with configureWebpack.optimization.splitChunks=false.

// vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  ⋮
  css: {
    extract: false, 1️⃣
  },
  configureWebpack: {
    optimization: {
      splitChunks: false, 2️⃣
    },
  },
})

The build then produces a dist directory containing these files:

dist/js/app.bd71ae48.js      # all app code, including template, scripts, and styles
dist/js/app.bd71ae48.js.map  # source map for development (optional)
dist/favicon.ico             # favicon shown in browser   (optional)
dist/index.html              # initial index              (optional)

Usage in Ghost

1. In your blog page, insert a custom HTML block.

2. In the HTML block, add a div with an ID that matches the mounting point in src/main.js from your app's original source (the default ID is "app").

   <div id="app">Vue app loading...</div>
   

3. Add a <script> that pulls in the app.js file previously built. For example, if you've hosted the script on GitHub, you could use a CDN link like this:

   <script src="https://cdn.jsdelivr.net/gh/tony19-sandbox/vue-cli-single-js-file@master/dist/js/app.bd71ae48.js"></script>
   

4. I noticed the app's Vue icon and heading are incorrectly aligned (likely due to inherited Ghost styles), so compensate by adding a <style> to the HTML block that re-centers them.

   <style>
   /* compensate for Ghost styles overriding the app's alignment */
   #app {
     display: flex;
     flex-direction: column;
     align-items: center;
   }
   </style>
   

The result looks like this:

GitHub

Ghost page

The vue cli have a command for this: https://cli.vuejs.org/guide/build-targets.html#library

You need to pass this command --target lib to the vue-cli-service build. This means that you only want one final file.

Also, you can pass another attributes, like:

• --inline-vue, that will include the Vue in your bundle, what is recommended, based on your use case;
• --name, the name of you bundle file;
• and in the end of the command, the entry point for you application, that is the src/Vue.js by default, but can be the main.js, for example. You have to test based on how you built your app;

So, you can try one of these combinations:

vue-cli-service build --target lib
vue-cli-service build --target lib --inline-vue
vue-cli-service build --target lib --inline-vue --name myApp
vue-cli-service build --target lib --inline-vue --name myApp src/main.js