[Vuejs]-Creating a Vue.JS component with nothing in the template section

by

2👍

✅

It is possible that mixins will help achieve desired behavior in such case.

Though, answering the question: it is also possible to create a component that does not render any html, but still has all component’s API.

Here is a simple example of such component. It can be imported and registered as SFC:

export default {
  name: 'RenderlessComponent',
  render: () => null,
  data () { 
    return {} 
  },
  methods: {},
  mounted() {}
};

Usage example:

Edit Vue Template

👤aBiscuit

1👍

You would like to create a mixin.

Step 1 : Create iziToastMixin.js file (say at the root of the project)

iziToastMixin.js

import Vue from 'vue';
import iziToast from 'izitoast';
import '../node_modules/izitoast/dist/css/iziToast.css';

// Here you can include some "default" settings
iziToast.settings({
  close: false,
  pauseOnHover: false,
  icon: '',
  timeout: 5000,
  progressBar: true,
  layout: 2
})

export default function install () {
  Object.defineProperties(Vue.prototype, {
    $iziToast: {
      get () {
        return iziToast
      }
    }
  })
}

Step 2 : Import the mixin created in main.js file and use it.

main.js

import iziToast from './iziToastPlugin'
Vue.use(iziToast);

Step 3 : Now, use the mixin in any component you like via accessing this.$iziToast

SampleComponent.vue

//... code

methods() {
  btnClicked() {
     this['$iziToast'].success({
        title: 'OK',
        message: 'Successfully inserted record!',
     });
   }
}

//... code
👤solanki…

Leave a comment