HTMLPLUS

Vue

HTMLPLUS web components are fully compatible with Vue framework. To utilize HTMLPLUS components in your Vue application, you can opt for one of these 4 ways. (Click each title to show more).


Using dedicated library for Vue 3.x.x (Recommanded)

1- Create Vue App

With an application built using the @vue/cli script the easiest way to include the component library.

2- Install

Installing HTMLPLUS package using node package manager.

npm install @htmlplus/vue

3- Usage

All HTMLPLUS components are available as same as a local tag (div, video, etc.) in the vue project. Add below code in the vue's template section and see the result.

<template>
  <plus-switch/>
  or
  <PlusSwitch/>
</template>

<script>
import { defineComponent } from 'vue';
import { PlusSwitch } from '@htmlplus/vue';

export default defineComponent({
  components: {
    PlusSwitch
  }
})
</script>

4- Properties

You can use this example to set properteis and attributes to web components.

<template>
  <plus-switch reverse/>
  or
  <plus-switch :reverse="true"/>
</template>

<script>
import { defineComponent } from 'vue';
import { PlusSwitch } from '@htmlplus/vue';

export default defineComponent({
  components: {
    PlusSwitch
  }
})
</script>

5- Events

Events should be written in this format.

<template>
  <plus-switch @change="change"/>
</template>

<script>
import { defineComponent } from 'vue';
import { PlusSwitch } from '@htmlplus/vue';

export default defineComponent({
  components: {
    PlusSwitch
  },
  methods: {
    change: () => alert('The switch toggled!')
  }
})
</script>

Using Web Components directly in Vue 3.x.x

In this way we use standard HTML Custom Elements directly, You can follow these steps.

1- Create Vue App

With an application built using the @vue/cli script the easiest way to include the component library.

2- Install

Installing HTMLPLUS package using node package manager.

npm install @htmlplus/core

3- Update vue.config.js file

Tell Vue to ignore all custom element tags defined in the @htmlplus/core. The vue.config.js would be something like this finally.

module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap((options) => {
        options.compilerOptions = {
          ...options.compilerOptions,
          isCustomElement: (tag) => tag.startsWith('plus-')
        }
        return options
      })
  }
}

4- Usage

All HTMLPLUS components are available as same as a local tag (div, video, etc.) in the vue project. Add below code in the vue's template section and see the result.

<template> 
  <plus-switch/>
</template> 

5- Properties

You can use this example to set properteis and attributes to web components.

<template> 
  <plus-switch reverse/>
  or
  <plus-switch :reverse="true"/>
</template> 

6- Events

Events should be written in this format.

<template>
  <plus-switch @plus-change="change"/>
</template>

<script>
export default {
  methods: {
    change: () => alert('The switch toggled!')
  }
}
</script>

Using dedicated library for Vue 2.x.x

Dedicated library for Vue 2.x.x is not supported.


Using Web Components directly in Vue 2.x.x

In this way we use standard HTML Custom Elements directly, You can follow these steps.

1- Create Vue App

With an application built using the @vue/cli script the easiest way to include the component library.

2- Install

Installing HTMLPLUS package using node package manager.

npm install @htmlplus/core

3- Import

The main.js would be something like this finally. Add the given values based on the example in your main.js file.

import Vue from 'vue';
import App from './App.vue';

// Tell Vue to ignore all custom element tags defined in the `@htmlplus/core`
Vue.config.ignoredElements = [/plus-\w*/];

new Vue({
  render: h => h(App)
}).$mount('#app');

4- Usage

All HTMLPLUS components are available as same as a local tag (div, video, etc.) in the vue project. Add below code in the vue's template section and see the result.

<template> 
  <plus-switch/>
</template> 

5- Properties

You can use this example to set properteis and attributes to web components.

<template> 
  <plus-switch reverse/>
  or
  <plus-switch :reverse="true"/>
</template> 

6- Events

Events should be written in this format.

<template>
  <plus-switch @plusChange="change"/>
</template>

<script>
export default {
  methods: {
    change: () => alert('The switch toggled!')
  }
}
</script>

What are the differences between the 4 ways ?

TypeEvent PrefixSupport v-model
Using dedicated library for Vue 3.x.x (Recommanded)NoYes
Using Web Components directly in Vue 3.x.xYesNo
Using dedicated library for Vue 2.x.xN/AN/A
Using Web Components directly in Vue 2.x.xYesNo
Prev
Why HTMLPLUS?
Next
Browser support