CODEWITHSUNDEEP
htmlvuejs2vue-component
axelmukwena
axelmukwena

Reputation: 1059

Unable to add custom content between Reusable Components with Vue.js

I am trying to create a reusable button using components but the new content Sign In applied to the custom tag to replace the default content Custom Text is not working.

Vue 2.6.11 | @vue/cli 4.5.13

I also checked this tutorial

<!-- ButtonWave.vue component -->
<template>
    <button type="button" class="btn custom-btn">
        Custom Text
    </button>
</template>

Importing the custom button

<!-- MainMenu.vue component -->
<template>
    <button-wave>Sign In</button-wave>
</template>

<script>
import ButtonWave from './ButtonWave.vue'

export default {
    name: 'main-menu',
    components: {
        ButtonWave
    },
    ...
</script>

The reproductable code is available at https://github.com/axelmukwena/risksis

Upvotes: 0

Views: 49

Answers (1)

Valentin Richet
Valentin Richet

Reputation: 501

You missed the part where the writer of the article mentioned the need of a slot:

Doing this should add a button element to the page with text that says “Button”. The text content is coming from the fallback content defined within the Button component. Fallback content is defined by putting content between the tags for a component. More can be read about slots and fallback content here.

Your template should look like this:

<template>
<button
    v-wave="{
        color: '#0054aa',
        easing: 'ease-out',
        initialOpacity: 0.5,
        finalOpacity: 0.1,
        cancellationPeriod: 75
    }"
    type="button"
    class="btn custom-btn"
>
    <slot>Custom Text</slot>
</button>
</template>

I would advise you to check out props and named slots before going further.
Good luck with your project!

Upvotes: 1

Related Questions