Inject devtools hook on iframe #498
Assignees
Labels
enhancement
New feature or request
Comments
|
Multiple app issue /cc @webfansplz |
|
We're missing the iframe injection case (See:https://github.com/vuejs/devtools/blob/main/packages/app-backend-core/src/hook.ts#L42 After a discussion with @elonehoo, he will try to support this case. |
|
🙌 let me handle it!!!!!!!!!!!!!!!! |
alexzhang1030
changed the title
alexzhang1030
added
enhancement
|
A playground can be: // main.ts
const app3 = createApp(Iframe)
app3.mount('#app3')<script setup lang="ts">
import Srcdoc from './srcdoc.html?raw'
</script>
<template>
<div class="m-auto mt-5 h-30 w-60 flex flex-col items-center justify-center rounded bg-[#363636]">
<iframe
sandbox="allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation"
:srcdoc="Srcdoc"
/>
</div>
</template><html>
<head>
<script type="importmap">
{
"imports": {
"vue": "https://play.vuejs.org/vue.runtime.esm-browser.js"
}
}
</script>
</head>
<body>
<div id="app"></div>
<script type="module">
import { createApp, h, ref } from 'vue'
const app = createApp({
setup() {
const counter = ref(0)
return () =>
h(
'div',
{
style: {
color: 'white',
display: 'flex',
'flex-wrap': 'wrap',
'justify-content': 'center',
'align-items': 'center',
height: '100vh',
},
},
h('h1', { style: { width: '100%' } }, 'App3 in iframe'),
h('count', `${counter.value}`),
h('div', h('button', { onClick: () => counter.value++ }, '++')),
)
},
}).mount('#app')
</script>
</body>
</html> |
|
wait..... this is so cool |
This was referenced Oct 30, 2024
|
@elonehoo any progress? |
|
any progress? |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
in my Chrome old version devtools, colud debug write component, but this is not new version.
The text was updated successfully, but these errors were encountered: