feat: ssr support

Author: webfansplz

README.md

@@ -11,7 +11,7 @@
 
 ## 📖 Introduction
 
-A vite plugin which provides the ability that to jump to the local IDE when you click the element of browser automatically. It supports Vue2 & 3.
+A vite plugin which provides the ability that to jump to the local IDE when you click the element of browser automatically. It supports Vue2 & 3 & SSR.
 
 <p align="center">
 <img src="https://github.com/webfansplz/vite-plugin-vue-inspector/blob/main/docs/images/vite-plugin-vue-inspector.gif" alt="vite-plugin-vue-inspector">
@@ -63,10 +63,56 @@ export default defineConfig({
 })
 ```
 
+```ts
+// for nuxt
+// nuxt.config.ts
+
+import { defineNuxtConfig } from 'nuxt'
+import Inspector from "vite-plugin-vue-inspector"
+
+export default defineNuxtConfig({
+  vite: {
+    plugins:[
+      Inspector()
+    ]
+  }
+})
+
+```
+
+### Nuxt Usage
+
+```ts
+// App.vue
+
+<template>
+  <inspector-overlay v-if="isDev"/>
+</template>
+
+<script lang="ts">
+
+import InspectorOverlay from "vite-plugin-vue-inspector/overlay.vue"
+export default {
+  name: "App",
+  components: {
+    InspectorOverlay
+  },
+  setup(){
+    return {
+      isDev: process.dev
+    }
+  }
+}
+
+</script>
+```
+
+
 ### Example
 
 - [vue2](https://github.com/webfansplz/vite-plugin-vue-inspector/tree/main/example/vue2)
 - [vue3](https://github.com/webfansplz/vite-plugin-vue-inspector/tree/main/example/vue3)
+- [nuxt](https://github.com/webfansplz/vite-plugin-vue-inspector/tree/main/example/nuxt)
 
 ## 🔌  Configuration IDE / Editor
 
@@ -120,7 +166,6 @@ export VUE_EDITOR=vim
 
 ## 💡 Notice
 
-- It only work in develop mode .
 - It does not currently support `SSR` and `Template Engine (e.g. pug)` .
 
 ## 🌸 Thanks

example/nuxt/.gitignore

@@ -0,0 +1,7 @@
+node_modules
+*.log*
+.nuxt
+.nitro
+.cache
+.output
+.env

example/nuxt/App.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="container">
+    <div>
+      <Hi />
+      <p> Welcome to here 🚀 . </p>
+      <!--  -->
+      <!--  -->
+      <!--  -->
+      <p>Vite so awesome 🔥 .</p>
+      <a href="https://github.com/webfansplz/vite-plugin-vue-inspector">Give me a star if it helps you 💗 .</a>
+    </div>
+  </div>
+  <inspector-overlay v-if="isDev" />
+</template>
+<script lang="ts">
+import Hi from "./Hi.vue"
+import InspectorOverlay from "vite-plugin-vue-inspector/overlay.vue"
+export default {
+  name: "App",
+  components: {
+    Hi,
+    InspectorOverlay,
+  },
+  setup() {
+    return {
+      isDev: process.dev,
+    }
+  },
+}
+</script>
+<style lang="sass" scoped>
+.container
+  width: 100vw
+  height: 100vh
+  font-family: Avenir, Helvetica, Arial, sans-serif
+  -webkit-font-smoothing: antialiased
+  -moz-osx-font-smoothing: grayscale
+  text-align: center
+  display: flex
+  align-items: center
+  justify-content: center
+p
+  font-size: 18px
+  color: #35495d
+  cursor: pointer
+</style>

example/nuxt/Hi.vue

@@ -0,0 +1,18 @@
+<template>
+  <div>
+    <h3>Hi</h3>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent } from "vue"
+
+export default defineComponent({
+  name: "Hi",
+})
+</script>
+<style lang="sass" scoped>
+h3
+  font-size: 26px
+  color: #7390ff
+  cursor: pointer
+</style>

example/nuxt/main.ts

@@ -0,0 +1,3 @@
+import { createApp } from "vue"
+import App from "./App.vue"
+createApp(App).mount("#app")

example/nuxt/nuxt.config.ts

@@ -0,0 +1,10 @@
+import { defineNuxtConfig } from "nuxt"
+import Inspector from "vite-plugin-vue-inspector"
+
+export default defineNuxtConfig({
+  vite: {
+    plugins: [
+      Inspector(),
+    ],
+  },
+})

example/nuxt/package.json

@@ -0,0 +1,13 @@
+{
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview"
+  },
+  "devDependencies": {
+    "nuxt": "3.0.0-rc.1",
+    "vite-plugin-vue-inspector": "0.5.3"
+  }
+}