CODEWITHSUNDEEP
vue.jsnuxt.js
CodingTil
CodingTil

Reputation: 487

Nuxt.JS Create Custom UI Material Components

In Nuxt.JS, I want to create some custom UI Materials/Components for my application (NOT A WHOLE LIBRARY LIKE VUETIFY).

This is my current approach:

Minimal Example

~components/Materials/m-button.vue

<template>
    <button>
        <!-- ???? -->
    </button>
</template>

And later I want to use this Material like this:

<m-button>
    Button Test
</m-button>

Currently, this isn't working. I have also tried replacing the <!-- ???? --> with <Nuxt /> & <nuxt-child /> but, as expected, the page gets placed in there (index.vue e.g.), instead of the text Button Test in this example.

Can I somehow get the DOM-"children"? Do I need to create a plugin? If yes, how? Couldn't find anything so far, not even with Vue.js.

Upvotes: 1

Views: 304

Answers (1)

tony19
tony19

Reputation: 138526

Use <slot> for this:

<template>
  <button>
    <slot/>
  </button>
</template>

demo

Upvotes: 1

Related Questions