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.

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

feat(client): add vue SFC custom tab #775

Merged
merged 5 commits into from
Jan 23, 2025
Merged

Conversation

FliPPeDround
Copy link
Contributor

Hello

I'm currently working on implementing a plugin for Devtools, and I've noticed that the tab currently only supports static VNode. While this works fine for many use cases, I was wondering if it might be possible to provide more

To this end, I've created this PR as an initial attempt to introduce support for SFC. I would love to hear your thoughts on whether this feature aligns with the project's goals and if there are any considerations or improvements we should take into account. If you have any concerns or suggestions, please let me know – I'm more than happy to make adjustments based on your feedback.

Thank you very much for your time and consideration!

import { addCustomTab } from '@vue/devtools-kit'

addCustomTab({
  name: 'plugin_count',
  title: 'Plugin Count',
  icon: 'baseline-exposure-plus-1',
  view: {
    type: 'sfc',
    sfc: `
		<script setup lang="ts">
		import { ref } from 'vue'
		
		const count = ref(0)
		</script>
		
		<template>
		  <div class="h-full w-full flex flex-col items-center justify-center">
		    <div>
		      count is {{ count }}
		    </div>
		    <button class="btn" @click="count++">
		      increment
		    </button>
		  </div>
		</template>
		
		<style scoped>
		.btn {
		  background-color: #4c51bf;
		  color: #fff;
		  padding: 0.5rem 1rem;
		  border-radius: 0.25rem;
		  border: none;
		  cursor: pointer;
		}
		</style>
		`,
  },
  category: 'app',
})
image

Copy link

netlify bot commented Jan 18, 2025

Deploy Preview for vue-devtools-docs ready!

Name Link
🔨 Latest commit 42e9372
🔍 Latest deploy log https://app.netlify.com/sites/vue-devtools-docs/deploys/6791c7cbf998440008442d84
😎 Deploy Preview https://deploy-preview-775--vue-devtools-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@webfansplz
Copy link
Member

LGTM. Awesome work @FliPPeDround

Copy link

pkg-pr-new bot commented Jan 23, 2025

Open in Stackblitz

@vue/devtools-applet

npm i https://pkg.pr.new/@vue/devtools-applet@775

@vue/devtools-core

npm i https://pkg.pr.new/@vue/devtools-core@775

@vue/devtools-api

npm i https://pkg.pr.new/@vue/devtools-api@775

@vue/devtools

npm i https://pkg.pr.new/@vue/devtools@775

@vue/devtools-kit

npm i https://pkg.pr.new/@vue/devtools-kit@775

vite-plugin-vue-devtools

npm i https://pkg.pr.new/vite-plugin-vue-devtools@775

commit: b2f8062

@webfansplz
Copy link
Member

Could you help to add the usage documentation here:

image

@FliPPeDround
Copy link
Contributor Author

Could you help to add the usage documentation here:

image

of course

@webfansplz webfansplz changed the title feat(client): add support for SFC in tabs view feat(client): add vue SFC custom tab Jan 23, 2025
@webfansplz webfansplz merged commit 59996b9 into vuejs:main Jan 23, 2025
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants