Distinguishing multiple apps

[p3k]

Version

6.0.0-beta.7

Browser and OS info

Chrome 89 / Ubuntu 18.04

Steps to reproduce

1. Integrate more than one Vue app in a website
2. Open Vue dev tools
3. Click the application drop down

What is expected?

A list of application names easily to be distinguished is displayed (e.g. Header, Footer, Tooltip).

What is actually happening?

A list of similar application names is displayed (e.g. App 1, App 2, App 3)

---

Here is a screenshot: https://pasteboard.co/JXpLdoH.png

[Akryum]

I think you didn't put names on your root component, so the devtools can't guess them?

[p3k]

i am aware this might go beyond the focus of this repo, but could you please elaborate how to put a name on the root component?

this is basically the way we mount the apps:

import { createApp } from "vue";
import App from "./app.vue";
createApp(App).mount("#app");

[Akryum]

Open your app.vue file and put export default { name: 'My app' } (docs).

[p3k]

thanks a lot, i really was looking for this – maybe need new glasses 🤓

[lighth7015]

Doing this only changes the app's element tag name; e.g.

import Vue from 'vue';
Vue.$mount({ name: 'FooBar' });

gives me a FooBar root element, e.g.-

<FooBar>
   ...
</FooBar>

leaving the Application name/ID as App 1.

[zealot128]

I've found a workaround, at least with Vue2

You will have to set the name property on the Vue root/app instance afterwards:

const app = new Vue({..., name: "This-Sets-Only-The-Root-Name"})
app.name = "This-changes-the-app-name-in-app-dropdown"

Passing the name property to the constructor only changes the name of the "Root" component, which changes nothing about the App-Selector.

But now, we can at least add the root-component name to the app-select dropdown:

...instead of the previous anonymous dropdown list:

This is/was a real issue after upgrading to newer Vue Tools. I really really liked the old way, where all Root were shown in the component finder window:

<Root>
   <ComponentA>
<Root>
  <Componet B>
..

But the workaround works for us now.

[Akryum]

@zealot128 It's not a workaround, it's how it's supposed to work. The selector takes the name of the root components.

I really really liked the old way, where all Root were shown in the component finder window

This caused a lot of issues such as preventing supporting multiple vuex stores/routers on the same page, and wouldn't work with the timeline.

[p3k]

@zealot128 this is a nice way to define a name dynamically – but in fact it does not work with vue3:

const app = createApp(component, props);
app.name = name;
app.mount(selector);

i am still seeing the name as defined in the sfc via the name property… (see https://github.com/vuejs/devtools/issues/1405#issuecomment-820260108)

is there a way to do this in vue3, so i can assign different names for one and the same component used multiple times in the dom?

[Akryum]

const app = createApp({ ...component, name: 'foo' }, props)

[p3k]

ah of course! perfect, thanks @Akryum

[zealot128]

@zealot128 It's not a workaround, it's how it's supposed to work. The selector takes the name of the root components.

I really really liked the old way, where all Root were shown in the component finder window

This caused a lot of issues such as preventing supporting multiple vuex stores/routers on the same page, and wouldn't work with the timeline.

I guessed so after reading packages/app-backend-api/src/api.ts, that's why I've tried this approach.

Only the typings of Vue do not allow a "name" here, so it is not obvious that a "name" can be applied here:

Nevertheless, it now works good with the name property! Future Googler's can find this post.

Or maybe it is possible to add a hint in the box if one has more than one "App" on the bottom of the mouse wheel hint? Like a link to this issue or a modal with explanation of adding the name property to a Vue instance to change the name, maybe.

[Akryum]

Only the typings of Vue do not allow a "name" here, so it is not obvious that a "name" can be applied here:

You need to put it in the options of the root component.

[zealot128]

Only the typings of Vue do not allow a "name" here, so it is not obvious that a "name" can be applied here:

You need to put it in the options of the root component.

No, that didn't work, at least here with our Vue 2 setup. Setting the new Vue({name: "whatever" }) only changes the name of the <Root> to <Whatever>, but the name in the dropdown is still "App 1". Same problem as written above in https://github.com/vuejs/devtools/issues/1405#issuecomment-831588390

[Akryum]

Hmm looks like an issue then

[Akryum]

So the intended way is to put a name in the options of the root component and will be fixed in the next release for Vue 2.

[zealot128]

@Akryum perfect! Thank you for the quick fix!

[jackchoumine]

Hmm looks like an issue then

Vue3 project has this issue as well.

[jackchoumine]

@Akryum perfect! Thank you for the quick fix!

vue3 project has this issue too,