CODEWITHSUNDEEP
vuejs2nuxt.js
Zuber
Zuber

Reputation: 3473

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

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 enter image description here

Upvotes: 0

Views: 1335

Answers (1)

Andrew1325
Andrew1325

Reputation: 3579

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"/>

Upvotes: 2

Related Questions