Use same Part of vue template in many places

Question

It’s possible to use same part of template in many places without duplicate code? I know that in JSX I can put the part of template into function and render that function in many places, but it’s possible in vue template ?

for example

<template>
    <element-to-use>
      <h1>{{ title }}</h1>
      <p>{{ description }}</p>
    </element-to-use>

    <tooltip>
      <template #content>
        <element-to-use></element-to-use>
      </template>

      <div>
        <img src="/img.png" />
        <element-to-use></element-to-use>
      </div>
    </tooltip>
  </template>

@Mateusz Ciołko That is what the Vue core feature of abstraction into re-usable Vue components is for, preventing you from code duplication aswell. — bitski
– bitski, Commented Nov 27, 2021 at 12:30
In Angular you actually can do it like above with <ng-template #name>...</ng-template> and then you can place it like this <ng-container *ngTemplateOutlet="name" />. Too bad Vue doesnt have it. — Mick
– Mick, Commented Feb 28, 2024 at 14:45

Mah Es · Accepted Answer · 2021-11-23 11:48:11Z

1

you can always create a vue component and put what ever you want inside it, then re-use that component anywhere you want. its just like what you said about react. just create a file like 'myComponent.vue', put your code inside it, then where ever you want to use it, just import it and define it as a component for the component you want to use it in. or you can define it as a global component.

for example, you can use it like this:

import myComponent from './components/myComponent.vue'
app.component('my-component', myComponent );

this way its a global component and you can place

<my-component></my-component>

anywhere

or you can import it and use it inside an specific component:

import myComponent from './components/myComponent.vue'
export default {
    data(){
     return{}
    },
    methods:{},
    components: {
       myComponent,
    },
}

and use it inside that component only :

<myComponent></myComponent>

edited Nov 23, 2021 at 11:48

answered Nov 23, 2021 at 11:39

Mah Es

6305 silver badges6 bronze badges

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

3 Comments

Jet Ezra Over a year ago

Yes, this is very corrrect, just take advantage of vue's components.

Djaangoo Over a year ago

I know that I can create components but putting part of simple HTML into components is a good practice? If that part has some logic - okay - but if it's static HTML You will have more code by creating a new component then copy/paste part of the template

Mah Es Over a year ago

one of the best things about a component is that you can use it 100 times and when you want to change anything about it, you just change that one component. now, imagine copy/pasting the same html 100 times, and all of a sudden you need to change that little html, what are you going to do? change all 100? no. yes its logical to create a component for static html if you want to use it many times.

Collectives™ on Stack Overflow

Use same Part of vue template in many places

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related