Skip to content

Commit d21619d

Browse files
ThimoDEVThimoDEV
authored
Merge pull request #135 from justserdar/devtools
feat: added codemirror devtool tab and updated module.ts
2 parents a90e821 + bb123a4 commit d21619d

File tree

16 files changed

+1333
-142
lines changed

16 files changed

+1333
-142
lines changed

‎client/.nuxtrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
imports.autoImport=true

‎client/app.vue

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<NuxtLayout>
3+
<NuxtPage />
4+
</NuxtLayout>
5+
</template>

‎client/components/DevtoolsPane.vue

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<script setup lang="ts">
2+
defineProps<{
3+
title: string
4+
}>()
5+
</script>
6+
7+
<template>
8+
<div
9+
class="relative
10+
px-4
11+
py-6
12+
border
13+
border-solid
14+
border-gray-200
15+
rounded
16+
my-4"
17+
>
18+
<span
19+
class="absolute
20+
bg-white
21+
text-xs
22+
dark:bg-[#151515]
23+
text-gray-400
24+
px-2
25+
rounded
26+
-top-2
27+
left-2"
28+
>{{ title }}</span>
29+
<slot />
30+
</div>
31+
</template>

‎client/components/ModuleAuthorNote.vue

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<script setup lang="ts">
2+
3+
</script>
4+
5+
<template>
6+
<NTip
7+
n="teal"
8+
class="py-4"
9+
>
10+
<p class="font-bold">
11+
Note for module authors:
12+
</p>
13+
Nuxt DevTools is in early preview and the API is subject to change.
14+
Which means the setup in this template is only presenting the current state of the API.
15+
We suggest following closely to the changes in the <NLink
16+
href="https://github.com/nuxt/devtools"
17+
target="_blank"
18+
>
19+
nuxt/devtools
20+
</NLink> repository.<br>
21+
The UI components are coming from <NLink
22+
href="https://github.com/nuxt/devtools/tree/main/packages/devtools-ui-kit"
23+
target="_blank"
24+
>
25+
@nuxt/devtools-ui-kit
26+
</NLink>.
27+
</NTip>
28+
</template>

‎client/global.d.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
interface Window {
2+
__CODEMIRROR__DEVTOOLS__?: {
3+
cb: () => void
4+
// You can add other properties of __CODEMIRROR__DEVTOOLS__ here if needed
5+
}
6+
}

‎client/nuxt.config.ts

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { resolve } from 'pathe'
2+
3+
export default defineNuxtConfig({
4+
5+
modules: [
6+
'@nuxt/devtools-ui-kit',
7+
'@nuxt/icon',
8+
'@nuxt/ui',
9+
],
10+
ssr: false,
11+
12+
app: {
13+
baseURL: '/__codemirror_nuxt_devtools',
14+
},
15+
16+
compatibilityDate: '2025-03-16',
17+
18+
nitro: {
19+
output: {
20+
publicDir: resolve(__dirname, '../dist/client'),
21+
},
22+
},
23+
24+
icon: {
25+
size: '24px', // default <Icon> size applied
26+
class: 'icon', // default <Icon> class applied
27+
aliases: {
28+
mesh: 'carbon:code',
29+
},
30+
},
31+
})

‎client/package.json

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
{
2+
"name": "codemirror-nuxt-devtools",
3+
"type": "module",
4+
"private": true
5+
}

‎client/pages/index.vue

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!-- eslint-disable max-len -->
2+
<script setup lang="ts">
3+
import { useDevtoolsClient } from '@nuxt/devtools-kit/iframe-client'
4+
5+
const client = useDevtoolsClient()
6+
</script>
7+
8+
<template>
9+
<div class="relative n-bg-base flex flex-col h-screen">
10+
<header class="p4 flex items-center justify-between hover:bg-active p-2" border="b base">
11+
<div class="flex items-center gap-4">
12+
<h2 class="opacity-60 font-bold">
13+
CodeMirror DevTools
14+
</h2>
15+
</div>
16+
<div class="flex items-center gap-2">
17+
<UButton variant="ghost" color="white" size="sm" icon="i-carbon-document" target="_blank"
18+
to="https://codemirror.net/docs/ref/" />
19+
<UButton variant="ghost" color="white" size="sm" icon="i-iconoir-github" target="_blank"
20+
to="https://github.com/ThimoDEV/nuxt-codemirror" />
21+
</div>
22+
</header>
23+
<div v-if="client" class="flex flex-col gap-2 p-2">
24+
Connected to the client.
25+
</div>
26+
<div v-else>
27+
<span class="text-yellow-500">
28+
Failed to connect to the client. Did you open this page inside Nuxt DevTools?
29+
</span>
30+
</div>
31+
</div>
32+
</template>

‎client/utils/index.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
// add your types here

‎package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,8 @@
2828
"dev:build": "nuxi build playground",
2929
"dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
3030
"release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
31+
"client:build": "nuxt prepare client && nuxi generate client",
32+
"client:dev": "nuxi dev client --port 3300",
3133
"docs": "nuxt dev docs",
3234
"docs:build": "nuxt build docs",
3335
"docs:prepare": "nuxt prepare docs",
@@ -53,6 +55,7 @@
5355
},
5456
"devDependencies": {
5557
"@nuxt/devtools": "^2.2.1",
58+
"@nuxt/devtools-ui-kit": "^1.6.4",
5659
"@nuxt/eslint-config": "^1.2.0",
5760
"@nuxt/module-builder": "^0.8.4",
5861
"@nuxt/schema": "^3.16.0",

0 commit comments

Comments
 (0)