Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cannot select a component in another App if there are multiple Apps on the page #718

Open
kevinluo201 opened this issue Nov 29, 2024 · 2 comments · May be fixed by #748
Open

Cannot select a component in another App if there are multiple Apps on the page #718

kevinluo201 opened this issue Nov 29, 2024 · 2 comments · May be fixed by #748
Labels
bug Something isn't working client scope: devtools client

Comments

@kevinluo201
Copy link

kevinluo201 commented Nov 29, 2024 •
edited
Loading

Hi there 😀, I've checked #454 but I am not sure if it is the same issue. The problem happens when there are multiple apps on a page. I cannot select a component unless I switch to the app which contains that component. Is it designed like that? However, when the mouse hovers over the component, it does show the name of the component but nothing happens when it is clicked, which is pretty confusing.

CleanShot.2024-11-28.at.23.55.08.mp4

The code is like this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <my-component title="Hello"></my-component>
  </div>

  <div id="app2">
    <my-component2 title="Hello2"></my-component2>
  </div>

  <script>
    const { createApp, ref } = Vue

    const app = createApp()
    app.component(
      'MyComponent',
      {
        template: `
          <div>
            <h1>{{ title }}</h1>
          </div>
        `,
        props: {
          title: String,
        }
      }
    )
    app.mount('#app')

    const app2 = createApp()
    app2.component(
      'MyComponent2',
      {
        template: `
          <div>
            <h1>{{ title }}</h1>
          </div>
        `,
        props: {
          title: String,
        }
      }
    )
    app2.mount('#app2')
  </script>
</body>
</html>
@stuartromanek
Copy link

Same. Bad experience. This is often the first thing you do when using the dev tools

@kevinluo201 kevinluo201 linked a pull request Dec 19, 2024 that will close this issue
Open
@alexzhang1030 alexzhang1030 added bug Something isn't working client scope: devtools client labels Dec 20, 2024
@kevinluo201
Copy link
Author

kevinluo201 commented Dec 24, 2024 •
edited
Loading

@stuartromanek @alexzhang1030 I just finished the PR. I think it can be refined, but the function is implemented.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working client scope: devtools client
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

feat(kit): toggle app when inspecting kevinluo201/devtools
3 participants
@kevinluo201 @stuartromanek @alexzhang1030