Vue Custom Element

14 May 2021

What is Vue custom elements?

Vue custom element is a simple component/widget created with the help of vue.js and that can be imported to any of the frameworks one is using, as a simple custom HTML tag. These custom HTML tags are known as Vue-custom-element. These vue custom elements are tiny wrappers around Vue components.

What are the uses of Vue widgets/ Vue-custom-elements?

Vue custom elements provide a smooth way to use it in HTML, vanilla JavaScript, Vue, React, Angular, etc., without manually initializing Vue instances. It’s using the power of Web Components’ Custom Elements

Steps to follow to create a Vue-custom-element:

• Modify the current Vue application as a custom HTML element.
• We need to change our main.js like the following mentioned below as it is the file via which we initialize our application.
• One has to keep in mind that one has to work with Vue CLI 3 while creating the custom element.
• In a normal Vue application we have main.js in src as:

  import Vue from 'vue'
  
  import App from './App.vue'
  
  import router from './router'
  
  import store from './store/index'
  
  
  new Vue({
  
   render: h => h(App)
  
  }).$mount(‘#app’)

• In order to get Vue custom element, we need to do the following
  • Run npm install vue-custom-element –save

• Change src/main.js to:

  import Vue from 'vue'
  
  import App from './App.vue'
  
  import router from './router'
  
  import store from './store/index'
  
  import vueCustomElement from 'vue-custom-element'
  
  
  Vue.use(vueCustomElement)
  
  App.store = store
  
  App.router = router
  
  Vue.customElement('vue-widget', App)

• Vue instance doesn’t come to use anymore to call our application. Vue.use(vueCustomElement) is doing it for us. And we give the widget name as (<vue-widget></vue-widget> in HTML) in the first argument and the Vue App component in the second argument.
• Now we need to change our index.html file:
  • In public/index.html we need to change our <div id=”app”></div>  as <vue-widget></vue-widget> 

• Also, we need to download and import the custom polyfill as old browsers might not work well with HTML custom elements.
  Run npm install document-register-element –saveAnd in src/main.js import the following:

  import 'document-register-element/build/document-register-element'

• In order to disable the chunks follow the steps:
• • Create a vue.config.js file in the root of your application (next to the package.json). This is where the webpack config is written in Vue CLI 3.
  • We will need to install webpack to use its LimitChunkCountPlugin. We will also need to pass the config to delete split chunks.
  • Run the following command:

    npm install webpack --save

  • And make the following changes to vue.config.js:
    

    const webpack = require('webpack')
    
    module.exports = {
    
    configureWebpack: {
    
        plugins: [
    
          new webpack.optimize.LimitChunkCountPlugin({
    
            maxChunks: 1
    
          })
    
        ]
    
      },
    
      chainWebpack:
    
        config => {
    
          config.optimization.delete('splitChunks')
    
        },
    
    filenameHashing: false
    
    css: { extract: true }
    
    }

• Now we need to run the build:
  • Use the command npm run build to create a build of your folder.
  • After creating the build we are almost done with our Vue custom element.
  • The build creates a dist folder that contains our app.js and app.css as well as the images and icons folder.

• Now we need to host it:
  • We need a hosting domain for it. I used Nginx for the purpose. Create a hosting domain and host the widget one made. Once the widget is hosted we need to provide with the app.js and app.css URLs to the page where we want to use our Vue custom element.
  • One needs to add the app. js and app.css link in the following manner along with the custom HTML tags.

    <link href="http://widget000/css/app.css" rel="stylesheet"/>
    
    <vue-widget title="Vuidget example"></vue-widget>
    
    <script src="https://widget000/js/app.js"></script>

• Accessing images and icons from the build/dist folder:
  • In order to access all the images and icons that we have used in our Vue custom application, we need to create a .htaccess file in the root of one’s domain folder, next to one’s index.html file, with the following content:

    Header add Access-Control-Allow-Origin "*"

• Now we just need to embed the widget to our page where we want to use it. We can do it as follows:

  <!doctype html>
  
  <html><head> <!-- widget source css -->
  
  <link href="http://widget000/css/app.css" rel="stylesheet">
  
  </head>
  
  <body>
  
  <vue-widget title="Vuidget example"></vue-widget>
  
  <!-- widget source js -->
  
  
  
  <script src="https://widget000/js/app.js"></script>
  
  </body>
  
  </html>

• By following these steps one can create a Vue custom element and use it as a widget.

Problems that I faced while creating the application:

• While creating the vue.config.js one must include the css: { extract: true } at the last as missing out in this might not create one’s app.css in the dist folder after the build.

• One might face issues accessing the images and icons. In order to sort it out, include the path of one’s images and icons on the page where one wants to host the custom element.

Set-Up used:

• IDE: PHP Storm
• Server: Nginx
• Languages and framework: HTML, CSS, and VueJS.
• Platform: Web
• Vue version used: 2.5.16

Conclusion

Vue custom elements are super useful when we want to stick those custom made widgets in any of the frameworks like VueJS, Angular, React or Ember etc. Creating custom widgets with the help of Vuejs is very handy and is easy to create.