How to create a reusable component in VueJs?

Question

I would like to create Side Panel as a reusable component in Framework7 with VueJS. Here is my code..

Card.vue

<f7-card>
  <f7-card-header>Card header content</f7-card-header>
  <f7-card-content><img src="https://wiki.videolan.org/images/Ubuntu-logo.png"></img></f7-card-content>
  <f7-card-footer>Card footer content</f7-card-footer>
</f7-card>

Now i registered as a component like below,

import Vue from 'vue'
export default [
    {
        path: '/card/',
        component: require('./Card')
    },
]

In later vues i imported as,

import Card from './Card.vue'

and i try to access in another vues like,

Now i'm getting an error like

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.

Can anyone help me where have i mistaken?

Thanks,

tony19 · Accepted Answer · 2022-07-15 02:53:39Z

3

It's not really clear from your code exactly what you are doing, but the error you are getting happens when you try to use a component as a child of another component without registering it in the parent's components setting like this:

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

export default {
  data () {
    return {
       somedata: 'some value'
    }
  },
  components: {Card: Card}, // <- you're missing this
  // etc...

}
</script>

You can also register components globally. More here: https://v2.vuejs.org/v2/guide/components.html#Local-Registration

edited Jul 15, 2022 at 2:53

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jul 3, 2017 at 18:38

Mark

92.6k8 gold badges116 silver badges156 bronze badges

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

1 Comment

Jaccs Over a year ago

Again it is saying that... Failed to mount component: template or render function not defined. (found in <Card>... I even added components: {Card, Card};

bbsimonbb · Accepted Answer · 2017-07-04 10:07:56Z

1

Are you showing us all of Card.vue? For a valid single-file vue component, I would expect to see <template>, <script> and <style> elements. The render function will be generated from whatever you put in the <template> element.

edited Jul 4, 2017 at 10:07

answered Jul 4, 2017 at 9:41

bbsimonbb

29.3k18 gold badges92 silver badges129 bronze badges

2 Comments

Jaccs Over a year ago

Adding <template>, <script> and <style> solved my problem... Now it is working with only one component.. when i try to add one more component by giving comma it is not accepting "You may need an appropriate loader to handle this file type. | } | }, | components: {FSidebar,FSidebar},{CSidebar,CSidebar}"

bbsimonbb Over a year ago

components is one object, inside which you have 'name':object, 'name':object. try components = {'FSidebar':FSidebar,'CSidebar':CSidebar}

Jose Mhlanga · Accepted Answer · 2021-01-15 08:55:01Z

0

Make sure that the component that you want to reuse is wrapped inside a template tag As follows

<template>
    <div>
        <component data/>
    <div/>
<template/>

Then register it inside the parent Like so

export default {
  name: "Card",
  components: {
    Card
  },
};

answered Jan 15, 2021 at 8:55

Jose Mhlanga

86512 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to create a reusable component in VueJs?

3 Answers 3

1 Comment

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Related