VueJS - render component only once

Question

Is it possible to have a component that would only ever be rendered/instantiated once and the same instance could be used by other components?

I'm using the npm Google Maps library in my project, and I want to have a single map instance rather than having to render it every time, which is using a lot of memory.

The below code shows the object that I'd like to be instantiated only once, as part of the component:

private googleMap: google.maps.Map;

    mounted() {
        this.googleMap = new google.maps.Map(document.getElementById('map'), myMap.options);
    }

Render it in the root component e.g. App.vue

EJL
– EJL

2018-11-26 06:26:05 +00:00
Commented Nov 26, 2018 at 6:26 — EJL
– EJL, Commented Nov 26, 2018 at 6:26

Harshal Patil · Accepted Answer · 2018-11-26 06:08:09Z

2

Instantiating component once and Rendering component once are two different things.

Rendering component once is meaningless to think about. Render function will always be called whenever any prop or instance property is changed.

Instantiating component once is a very common scenario. Components like snackbar, dialog box, alert notifiers are often instantiated once.

To instantiate component once, there are two things you can do. First, make this component child of root instance or somewhere at the top of a component hierarchy like:

// Root Instance Template
<app-component>
    <header></header>
    <router-view></router-view>
    <google-map></google-map>
</app-component>

Next option is to manually instantiate and mount this component alongside the root Vue instance. Then, inject this component into your application hierarchy. You can do something like:

const mapComp = new Vue({ name: 'google-map' })
    .$mount(document.querySelector('.map'));

// Pass mapComp to rootInstance which can then inject into children component.
const rootInstance = new Vue({ /* options */, mapComp })
    .$mount(document.querySelector('.app'));

There are pros and cons of both the approaches but generally, the first approach should be preferred.

answered Nov 26, 2018 at 6:08

Harshal Patil

21.5k17 gold badges76 silver badges156 bronze badges

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

1 Comment

J Marlow Over a year ago

Thanks for your answer

tony19 · Accepted Answer · 2022-07-16 00:29:33Z

1

use vuex store to store your googleMap object and pass a reference to it to your component as props (recommended). that way, you can render your component a few times, but their googleMap prop will refer to your single googleMap object in the store.

i dont think its possible in vuejs to render a single component in different places in your app.

edited Jul 16, 2022 at 0:29

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Nov 25, 2018 at 18:02

Efrat Levitan

5,6922 gold badges24 silver badges41 bronze badges

1 Comment

J Marlow Over a year ago

Thanks for your answer

Collectives™ on Stack Overflow

VueJS - render component only once

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related