Bundle Vue project into single js file that can be embedded in Ghost blog post

Question

I have a simple Vue.js project built after running yarn build. The dist folder contains files like below;

I want to bundle all the files (HTML, js, CSS) into a single js file that can be embedded into a ghost blog post.

Here is an example of how this was done for a ghost blog post.

https://blog.openbloc.com/including-a-js-app-in-a-ghost-post/

My question is how do I bundle my Vue.js project files into a single file that can be deployed in a ghost blog post?

Is webpack the right tool to use? I am open to other alternatives.

I am using @vue/cli 5.0.1, yarn v1.22.17

Answer 1

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