A common story of reusable cross-platform VueJS component library

We currently write => design => develop educational-purpose web simulations by the most popular programming language => JavaScript.

The things that we have been facing while the process from start to end may be very tricky. Users must interact in the simulations, so it means most of actions have to be involve dynamic content exchange on client side, correctly. How we manage the whole process does not have only one answer or solution. No data interaction between the real server and client side effected when handshakes occur during the process. Instead, there is an another, maybe a mid-layer, platform comes into play to manage the communication, called LMS.

As single-run projects count grows, we found ourselves repeat when we are coding. There should be existed some reusable project parts we thought.

So the plan was building the reusable parts with standard or special configurations, combine in a project as templates and when we need some, just call them internally.

VueJS and webpack together very powerful tools to perform this kind of action.

When I started to develop a library component, Divyam Rastogi’s article really helped a lot, you should check it out.

Alright, enough for the talk, let’s dive into code.

First things first; Install latest Vue CLI 3 release globally, and create a new VueJS project:

$ npm install -g @vue/cli
$ vue create vue-lib

Now you should have the standard Vue project structure in vue-lib directory. Inside the directory, you can use components directory for your library components or you can use another special directory. I will use another directory for my reusable component libraries to avoid using local components as libraries.

Ignore other unfamiliar directories for now

You may need to control the newly created project for everything works correctly first. So, install node modules then start web server in development mode, (by default all projects are in development mode when you type below command into CLI)

$ npm run serve

Let’s create an informal web modal with VueJS as a library component:

Basically the above component is just a modal with it’s default content. I also use Vuex module to keep data clean, you don’t need to do that, it’s just a recommended way.

This component can be used after registered in a template. But we were planning to develop it as a reusable library component as we have done in jQuery for years.

So, instead directly registering inside a template, we build it in production mode to be compiled to prior of ES2015 standards and use everywhere as standardized.

Check out the package.json file for CLI options.

"scripts": {
   "serve": "vue-cli-service serve",
   "build": "vue-cli-service build",
   "lint": "vue-cli-service lint"
}

When you run the serve command, a vue CLI script actually takes an action as

vue-cli-service serve

We use build script to compile our component for backward compatibility in non-modern web and mobile browsers.

Create a file named about-modal.js inside libs directory to register component to Vue, it is also an entry file. The content of the file is shown in below.

Now finally let’s compile our component with below command:

vue build --target lib --name about-modal ./src/libs/about-modal.js --dest ./src/libs/dist/about-modal

After that a new directory dist will be created inside libs directory, and inside of dist another new directory called about-modal. This makes much more cleaner the structure for the upcoming another component builds. The final file structure will be like below:

You can now import and use the library component with it’s options (props) like below for example in a template:

<template>
   ...
      <div>
         <AboutModal
            v-if="showModal"
            @close="showModal = false"
            :header="true"
            :body="true"
            :footer="true"
            position="center"
            :modalStyle="{}"
            :headerStyle="{}"
            :bodyStyle="{ backgroundColor: 'green' }"
            :footerStyle="{}"
            :maskBackgroud="{}"
            infoHeader="Example header text"
            infoBody="Example body text"
            infoFooter="Example footer text"
            buttonText="Example button text"
         />
      </div>
   ...
</template>
<script>
import '@/libs/about-modal/dist/about-modal.common.js'
import '@/libs/about-modal/dist/about-modal.css'
export default {
   data () {
      return {
          showModal: false
      }
   }
}
...

Sometimes webpack makes troubles while building targeted libraries. Some common resolutions for fixes are listed below, and if you have another opinions for issues like those, please inform and I can edit it.

1- Do not use filenameHashing for this kind of build in vue config
2- Use the option sourceType as 'unambiguous' in babel config

Happy coding.

References

1- https://vuejsdevelopers.com/2018/05/21/vue-js-web-component/

2- https://medium.com/justfrontendthings/how-to-create-and-publish-your-own-vuejs-component-library-on-npm-using-vue-cli-28e60943eed3