Creating a Vue.JS component with nothing in the template section

Question

I'm trying to use vue-iziToast to throw notifications at the top of the page. Since I'm using the same style for all notifications so I decided to use it in form of a component rather than rewriting the code over and over again... My problem: to create a component in vue, I declare it in main.js, create a page with its name that has everything, and later, I use it only by creating an html tag with the name of said component.

vue-iziToast happens completely in the script part of the component.. I just add this line in the method that should trigger it:

this.$toast.success( this.notificationMessage , 'OK', VueIziToast.options.success);

and I have success defined earlier in the code like this:

  VueIziToast: {
    options: {
      success: {
        position: "topCenter",
        color: "#eaeaea",
        messageColor: "success",
        messageSize: 18
      }
    }
  },
  notificationMessage: "It's ALIVE!!"

and this works perfectly fine within the page, but to move it as a component, I'm unable to create a component with no html part. how will I call it without any html template?

I think you might want to have a look at `mixins`. https://vuejs.org/v2/guide/mixins.html https://stackoverflow.com/questions/49870735/component-without-template — T. Dirks, Oct 31 '18 at 09:59
@T.Dirks Beat me to it. I was about to say the same thing. You also could make a plugin for toastr. You can find an example here -> https://github.com/IlyasDeckers/vuetiful/tree/master/src/plugins/toastr — Odyssee, Oct 31 '18 at 10:01
Does this answer your question? [Component without template](https://stackoverflow.com/questions/49870735/component-without-template) — Hedeshy, Jan 10 '22 at 10:49

score 2 · Accepted Answer · edited Jul 16 '22 at 00:31

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:

edited Jul 16 '22 at 00:31

tony19

125,647
18
229
307

answered Oct 31 '18 at 10:54

aBiscuit

4,414
1
17
28

this sounds quite close to what I had in mind.. now how do I use a method from this file in a Vue page? do I import it on top, and just call `this.$component.method()` – j0zeft Oct 31 '18 at 11:00
Multiple options are available to invoke component's methods from other, non parent-child components: [Global event bus](https://medium.com/pixeldenkers-blog/simple-communication-between-vue-js-components-using-the-eventbus-ef20facd8020), [Emitting $root instance events](https://github.com/nuxt/nuxt.js/issues/849#issuecomment-307016399) or using [Vuex](https://vuex.vuejs.org/guide/) (may be an overkill to implement it for this particular case) – aBiscuit Oct 31 '18 at 11:33

score 1 · Answer 2 · answered May 08 '19 at 16:42

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

Creating a Vue.JS component with nothing in the template section

2 Answers2