create a global component with children using multiple props in vue and nuxt js

Question

I am trying to build global a component with children and multiple props for multiple usage. i don't know where i am making a mistake. here is my component file

SectionHeading.vue

<script>
import Vue from 'vue'
import Heading from '~/components/Heading.vue'

  Vue.component('SectionHeading', {
    props: {
      heading: [String],
      content: [String]
    },
    template: '<div><Heading>{{ heading }}</Heading><p>{{ content }}</p></div>'
    // this may be not necessary
  })

  export default {
    components: {
      Heading
    }
  }
</script>

<template>
  <b-container class="text-center">
      <span><img src="~/assets/images/Icon.svg" alt="" /></span>
      <Heading :level="3">{{ heading }}</Heading>
      <p>{{ content }}</p>
  </b-container>
</template>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">

</style>

Here is my index file where i am importing SectionHeading component

index.vue

<template>
  <section class="">
    <SectionHeading heading="About Me" content="lorem ipsum" />
  </section>
</template>

<script>
  import SectionHeading from '~/components/SectionHeading.vue'
  export default {
    components: {
      SectionHeading
    },
    data () {
      return {
        title: 'Home'
      }
    },
    head () {
      return {
        title: this.title
      }
    }
  }
</script>
<style>

</style>

i want it to be render as below

<div class="contaniner">
  <span><img src="images/Icon.svg" alt="" /></span>
  <h3>About Me</h3>
  <p>lorem ipsum</p>
</div>

what i am getting is

<div class="container">
 <span><img src="images/Icon.svg" alt="" /></span>
 <h3></h3>
 <p></p> 
</div>

the error i am getting

Andrew1325 · Accepted Answer · 2019-07-10 07:40:11Z

2

I think you're going about this and trying to create a global component the "Vue way" when you really should do it the "Nuxt way".

The "Nuxt way" would go something like this:

//components/SectionHeading.vue
<script>
import Heading from '~/components/Heading.vue'

export default {
  props: ['heading', 'content'],
  components: {
    Heading
  }
}
</script>

<template>
  <b-container class="text-center">
      <span><img src="~/assets/images/Icon.svg" alt="" /></span>
      <Heading :level="3">{{ heading }}</Heading>
      <p>{{ content }}</p>
  </b-container>
</template>

<style scoped lang="scss">

</style>

Then you want to create a file in the plugins directory, lets call it global.js

//plugins/global.js
import Vue from 'vue'
import SectionHeading from '~/components/SectionHeading.vue'

Vue.component('section-heading', SectionHeading)

And then register that plugin in nuxt.config.js

//nuxt.config.js
...
plugins: [ '@/plugins/global.js' ]
...

and you should be right to use it in any page as

<section-heading heading="blah" content="blah more"/>

answered Jul 10, 2019 at 7:40

Andrew1325

3,5791 gold badge18 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Zuber Over a year ago

working fine. thanks for the solution. what if i want to add <br> in p tag? see if you can help me out :)

Andrew1325 Over a year ago

In your SectionHeading.vue? Do you mean like: <p>{{ content }}<br> Some other content</p>? You can add as many <br> as you like.

Zuber Over a year ago

No, i mean br inside content for multiple lines

Andrew1325 Over a year ago

That is up to how you structure your content. You could include html in your content like: <p>This is <br> our content</p> and then render it with v-html. Replace <p>{{ content }}</p> with <p v-html="content"></p> although maybe more likely a div or something, <div v-html="content"></div>. Otherwise you'd have to have to use javascript, things like split(), replace(), or join() to alter the "content" string either to break into several strings or to insert line breaks.

Zuber Over a year ago

Thanks for the detailed explanation. Answer accepted. :)

Collectives™ on Stack Overflow

create a global component with children using multiple props in vue and nuxt js

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related