├── .nuxtrc
├── .eslintignore
├── tsconfig.json
├── playground
    ├── package.json
    ├── nuxt.config.ts
    └── app.vue
├── .eslintrc
├── src
    ├── runtime
    │   ├── images
    │   │   └── cogwheel.png
    │   ├── plugin.ts
    │   ├── components
    │   │   ├── DevToolsWrapper.vue
    │   │   ├── DevToolsInputField.vue
    │   │   └── DevTools.vue
    │   └── composables
    │   │   ├── useCustomRuntimeConfig.ts
    │   │   ├── useModuleConfig.ts
    │   │   ├── useEnvVar.ts
    │   │   └── useDevToolsModel.ts
    ├── types.d.ts
    └── module.ts
├── .editorconfig
├── types.d.ts
├── README.md
├── .gitignore
└── package.json


/.nuxtrc:
--------------------------------------------------------------------------------
1 | imports.autoImport=false
2 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | dist
2 | node_modules
3 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "./playground/.nuxt/tsconfig.json"
3 | }
4 | 


--------------------------------------------------------------------------------
/playground/package.json:
--------------------------------------------------------------------------------
1 | {
2 |   "private": true,
3 |   "name": "my-module-playground"
4 | }
5 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": [],
3 |   "rules": {
4 |     "quotes": ["error", "double"]
5 |   }
6 | }
7 | 


--------------------------------------------------------------------------------
/src/runtime/images/cogwheel.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/paulmelero/nuxt-module-example-custom-devtools/HEAD/src/runtime/images/cogwheel.png


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | indent_size = 2
 5 | indent_style = space
 6 | end_of_line = lf
 7 | charset = utf-8
 8 | trim_trailing_whitespace = true
 9 | insert_final_newline = true
10 | 
11 | [*.md]
12 | trim_trailing_whitespace = false
13 | 


--------------------------------------------------------------------------------
/src/types.d.ts:
--------------------------------------------------------------------------------
1 | export type AnyConfig = Record<string, any>;
2 | 
3 | export interface ModuleOptions {
4 |   openByDefault: boolean;
5 |   rootClass: string;
6 |   defaultPosition: "top-left" | "top-right" | "bottom-left" | "bottom-right";
7 |   closeViaEscapeKey: boolean;
8 | }
9 | 


--------------------------------------------------------------------------------
/playground/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineNuxtConfig } from 'nuxt/config';
 2 | import CustomDevtools from '..';
 3 | 
 4 | export default defineNuxtConfig({
 5 |   modules: [CustomDevtools],
 6 |   runtimeConfig: {
 7 |     public: { testEnvVar: 'test' },
 8 |   },
 9 |   customDevtools: {},
10 | });
11 | 


--------------------------------------------------------------------------------
/playground/app.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     {{ envVar }}
 4 |   </div>
 5 |   <DevToolsWrapper />
 6 | </template>
 7 | 
 8 | <script setup>
 9 | import { useNuxtApp } from "#imports";
10 | 
11 | const { $useEnvVar } = useNuxtApp();
12 | 
13 | const envVar = $useEnvVar("testEnvVar");
14 | </script>
15 | 


--------------------------------------------------------------------------------
/types.d.ts:
--------------------------------------------------------------------------------
 1 | import type { ComputedRef, ToRefs } from "vue";
 2 | 
 3 | declare module "#app" {
 4 |   interface NuxtApp {
 5 |     $useEnvVar: ComputedRef<any>;
 6 |   }
 7 | }
 8 | declare module "@vue/runtime-core" {
 9 |   interface ComponentCustomProperties {
10 |     $useEnvVar: ComputedRef<any>;
11 |   }
12 | }
13 | export {};
14 | 


--------------------------------------------------------------------------------
/src/runtime/plugin.ts:
--------------------------------------------------------------------------------
 1 | import { defineNuxtPlugin } from "#imports";
 2 | 
 3 | import { useEnvVar } from "./composables/useEnvVar";
 4 | 
 5 | export default defineNuxtPlugin(() => {
 6 |   return {
 7 |     provide: {
 8 |       // injects $useEnvVar in the Nuxt app instance
 9 |       // const { $useEnvVar } = useNuxtApp();
10 |       useEnvVar,
11 |     },
12 |   };
13 | });
14 | 


--------------------------------------------------------------------------------
/src/runtime/components/DevToolsWrapper.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div :class="[moduleConfig.rootClass]">
 3 |     <ClientOnly>
 4 |       <DevTools>
 5 |         <slot />
 6 |       </DevTools>
 7 |     </ClientOnly>
 8 |   </div>
 9 | </template>
10 | 
11 | <script setup lang="ts">
12 | import { useModuleConfig } from "../composables/useModuleConfig";
13 | const { moduleConfig } = useModuleConfig();
14 | </script>
15 | 
16 | <style scoped></style>
17 | 


--------------------------------------------------------------------------------
/src/runtime/composables/useCustomRuntimeConfig.ts:
--------------------------------------------------------------------------------
 1 | import { useRuntimeConfig } from "#app";
 2 | import { PublicRuntimeConfig } from "@nuxt/schema";
 3 | 
 4 | export function useCustomRuntimeConfig() {
 5 |   const staticConfig: Partial<PublicRuntimeConfig> = Object.assign(
 6 |     {},
 7 |     useRuntimeConfig().public
 8 |   );
 9 |   // do not include this module config in the DevTools
10 |   delete staticConfig.customDevtools;
11 | 
12 |   return staticConfig;
13 | }
14 | 


--------------------------------------------------------------------------------
/src/runtime/composables/useModuleConfig.ts:
--------------------------------------------------------------------------------
 1 | import { useStorage, type RemovableRef } from "@vueuse/core";
 2 | import { useRuntimeConfig } from "#app";
 3 | import type { ModuleOptions } from "../../types";
 4 | 
 5 | export function useModuleConfig(): {
 6 |   moduleConfig: RemovableRef<ModuleOptions>;
 7 | } {
 8 |   const moduleConfig = useStorage(
 9 |     "module-config",
10 |     useRuntimeConfig().public.customDevtools
11 |   );
12 |   return { moduleConfig };
13 | }
14 | 


--------------------------------------------------------------------------------
/src/runtime/composables/useEnvVar.ts:
--------------------------------------------------------------------------------
 1 | import { computed } from "vue";
 2 | 
 3 | import { useDevToolsModel } from "./useDevToolsModel";
 4 | 
 5 | export function useEnvVar(key: string) {
 6 |   const { model: customConfig } = useDevToolsModel();
 7 | 
 8 |   if (!key || !(key in customConfig.value)) {
 9 |     throw new Error(
10 |       `Custom Devtools - ${String(key)} is not defined in form config`
11 |     );
12 |   }
13 | 
14 |   return computed(() => customConfig.value[key]);
15 | }
16 | 


--------------------------------------------------------------------------------
/src/runtime/composables/useDevToolsModel.ts:
--------------------------------------------------------------------------------
 1 | import { useState } from "#app";
 2 | import { useCustomRuntimeConfig } from "./useCustomRuntimeConfig";
 3 | 
 4 | export const useDevToolsModel = () => {
 5 |   const initialState = useCustomRuntimeConfig();
 6 | 
 7 |   const model = useState("config", () => {
 8 |     return initialState;
 9 |   });
10 | 
11 |   const resetModel = () => {
12 |     model.value = Object.assign({}, initialState);
13 |   };
14 | 
15 |   return {
16 |     model,
17 |     resetModel,
18 |   };
19 | };
20 | 


--------------------------------------------------------------------------------
/src/runtime/components/DevToolsInputField.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <p>{{ label }}</p>
 3 |   <input v-bind="$attrs" type="text" v-model="formModel[label]" :id="label" />
 4 | </template>
 5 | 
 6 | <script setup lang="ts">
 7 | import { Ref } from "vue";
 8 | import { PublicRuntimeConfig } from "@nuxt/schema";
 9 | 
10 | defineProps<{
11 |   formModel: Ref<Partial<PublicRuntimeConfig>>;
12 |   label: string;
13 | }>();
14 | </script>
15 | 
16 | <style scoped>
17 | input {
18 |   width: 100%;
19 |   border-radius: 0.2em;
20 |   padding: 0.2em 0.3em;
21 | }
22 | </style>
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # nuxt-module-example-custom-devtools
 2 | 
 3 | This is the Nuxt module presented in the Nuxt Nation as an example of how to build custom Devtools for your Nuxt 3 application.
 4 | 
 5 | Note that the work done here is merely for educational purposes.
 6 | 
 7 | If you want to build a custom Devtools based on this example, I recommend improving the form: accepting more than just string type values and add other features as well:
 8 | 
 9 | - [ ] share current configuration via URL parameters
10 | - [ ] add [msw.js](https://mswjs.io/) to intercept requests and mock the app state
11 | 
12 | I hope you liked the presetation! 💚
13 | 
14 | ## Let's connect!
15 | 
16 | - [Twitter](https://twitter.com/paul_melero)
17 | - [LinkedIn](https://www.linkedin.com/in/paulmelero/)
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Dependencies
 2 | node_modules
 3 | 
 4 | # Logs
 5 | *.log*
 6 | 
 7 | # Temp directories
 8 | .temp
 9 | .tmp
10 | .cache
11 | 
12 | # Yarn
13 | **/.yarn/cache
14 | **/.yarn/*state*
15 | 
16 | # Generated dirs
17 | dist
18 | 
19 | # Nuxt
20 | .nuxt
21 | .output
22 | .vercel_build_output
23 | .build-*
24 | .env
25 | .netlify
26 | 
27 | # Env
28 | .env
29 | 
30 | # Testing
31 | reports
32 | coverage
33 | *.lcov
34 | .nyc_output
35 | 
36 | # VSCode
37 | .vscode/*
38 | !.vscode/settings.json
39 | !.vscode/tasks.json
40 | !.vscode/launch.json
41 | !.vscode/extensions.json
42 | !.vscode/*.code-snippets
43 | 
44 | # Intellij idea
45 | *.iml
46 | .idea
47 | 
48 | # OSX
49 | .DS_Store
50 | .AppleDouble
51 | .LSOverride
52 | .AppleDB
53 | .AppleDesktop
54 | Network Trash Folder
55 | Temporary Items
56 | .apdisk
57 | 


--------------------------------------------------------------------------------
/src/module.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 |   createResolver,
 3 |   defineNuxtModule,
 4 |   addPlugin,
 5 |   addComponentsDir,
 6 | } from "@nuxt/kit";
 7 | import defu from "defu";
 8 | 
 9 | import { ModuleOptions } from "./types";
10 | 
11 | export default defineNuxtModule<ModuleOptions>({
12 |   meta: {
13 |     name: "custom-devtools",
14 |     configKey: "customDevtools",
15 |   },
16 |   defaults: {
17 |     openByDefault: true,
18 |     rootClass: "nuxt-custom-devtools",
19 |     defaultPosition: "top-left",
20 |     closeViaEscapeKey: true,
21 |   },
22 |   setup(options, nuxt) {
23 |     const isDev = nuxt.options.dev;
24 |     if (isDev) {
25 |       console.log("Custom Devtools - Running in dev mode");
26 |     }
27 | 
28 |     // options
29 |     nuxt.options.runtimeConfig.public.customDevtools = defu(
30 |       nuxt.options.runtimeConfig.public.customDevtools,
31 |       options
32 |     );
33 | 
34 |     const { resolve } = createResolver(import.meta.url);
35 | 
36 |     // Add plugin
37 |     addPlugin(resolve("./runtime/plugin"));
38 | 
39 |     // Add components
40 |     addComponentsDir({ path: resolve("./runtime/components") });
41 |   },
42 | });
43 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "nuxt-module-example-custom-devtools",
 3 |   "version": "0.0.0",
 4 |   "description": "Nuxt module example. Custom Devtools",
 5 |   "author": "Paul Melero",
 6 |   "license": "MIT",
 7 |   "repository": "https://github.com/gangsthub/nuxt-module-example-custom-devtools",
 8 |   "type": "module",
 9 |   "exports": {
10 |     ".": {
11 |       "import": "./dist/module.mjs",
12 |       "require": "./dist/module.cjs"
13 |     }
14 |   },
15 |   "main": "./dist/module.cjs",
16 |   "types": "./dist/types.d.ts",
17 |   "files": [
18 |     "dist"
19 |   ],
20 |   "scripts": {
21 |     "prepack": "nuxt-module-build",
22 |     "dev": "nuxi dev playground",
23 |     "dev:build": "nuxi build playground",
24 |     "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground"
25 |   },
26 |   "dependencies": {
27 |     "@nuxt/kit": "^3.0.0-rc.13",
28 |     "@vueuse/core": "^9.5.0",
29 |     "defu": "^6.1.1"
30 |   },
31 |   "devDependencies": {
32 |     "@nuxt/module-builder": "^0.2.0",
33 |     "@nuxt/schema": "^3.0.0-rc.13",
34 |     "@nuxtjs/eslint-config-typescript": "^11.0.0",
35 |     "eslint": "^8.26.0",
36 |     "nuxt": "^3.0.0-rc.13"
37 |   }
38 | }
39 | 


--------------------------------------------------------------------------------
/src/runtime/components/DevTools.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="custom-devtools" :class="[moduleConfig.defaultPosition]">
  3 |     <header>
  4 |       <h3>
  5 |         <span><img src="../images/cogwheel.png" alt="" /></span>
  6 |         <span>Devtools</span>
  7 |       </h3>
  8 |     </header>
  9 |     <form @submit.prevent v-if="moduleConfig.openByDefault">
 10 |       <h4 class="title">Runtime Config</h4>
 11 |       <label v-for="(value, key) in formModel" :for="key" :key="key">
 12 |         <DevToolsInputField
 13 |           v-if="typeof formModel[key] === 'string'"
 14 |           v-model="formModel[key]"
 15 |           :formModel="formModel"
 16 |           :label="key"
 17 |         />
 18 |       </label>
 19 | 
 20 |       <hr v-if="hasSlots" />
 21 |       <h4 class="title" v-if="hasSlots">Custom Area</h4>
 22 |       <slot />
 23 |       <hr />
 24 | 
 25 |       <h4 class="title">Devtools Options</h4>
 26 |       <label for="positionClass">
 27 |         <p class="title">Position</p>
 28 |         <select v-model="moduleConfig.defaultPosition" id="positionClass">
 29 |           <option value="top-left">Top Left</option>
 30 |           <option value="top-right">Top Right</option>
 31 |           <option value="bottom-left">Bottom Left</option>
 32 |           <option value="bottom-right">Bottom Right</option>
 33 |         </select>
 34 |       </label>
 35 |     </form>
 36 | 
 37 |     <footer>
 38 |       <button
 39 |         class="toggle"
 40 |         @click="moduleConfig.openByDefault = !moduleConfig.openByDefault"
 41 |       >
 42 |         {{ moduleConfig.openByDefault ? "Close" : "Open" }}
 43 |       </button>
 44 |     </footer>
 45 |   </div>
 46 | </template>
 47 | 
 48 | <script setup lang="ts">
 49 | import { Ref, useSlots, computed } from "vue";
 50 | import { PublicRuntimeConfig } from "@nuxt/schema";
 51 | 
 52 | import { useDevToolsModel } from "../composables/useDevToolsModel";
 53 | import { useModuleConfig } from "../composables/useModuleConfig";
 54 | 
 55 | const { moduleConfig } = useModuleConfig();
 56 | 
 57 | let { model: formModel }: { model: Ref<Partial<PublicRuntimeConfig>> } =
 58 |   useDevToolsModel();
 59 | 
 60 | const $slots = useSlots();
 61 | const hasSlots = computed(
 62 |   () =>
 63 |     !!(
 64 |       $slots.default &&
 65 |       $slots.default().length &&
 66 |       $slots.default()[0].children?.length
 67 |     )
 68 | );
 69 | </script>
 70 | 
 71 | <style scoped>
 72 | header {
 73 |   background-color: blueviolet;
 74 |   color: white;
 75 |   padding: 0.4em 0.8em;
 76 | }
 77 | header h3 {
 78 |   margin: 0;
 79 |   display: flex;
 80 | 
 81 |   align-items: center;
 82 | }
 83 | header h3 > span:nth-child(2) {
 84 |   padding-left: 0.5em;
 85 | }
 86 | header h3 img {
 87 |   height: 1em;
 88 |   width: 1em;
 89 |   filter: invert(1);
 90 | }
 91 | p {
 92 |   margin-bottom: 0.1rem;
 93 | }
 94 | h4 {
 95 |   margin-top: 0em;
 96 | }
 97 | label {
 98 |   padding-bottom: 0.5rem;
 99 | }
100 | select {
101 |   width: 100%;
102 |   border-radius: 0.2em;
103 |   padding: 0.2em 0.3em;
104 | }
105 | form,
106 | footer {
107 |   padding: 1em;
108 | }
109 | form {
110 |   margin-bottom: 1em;
111 | }
112 | .title {
113 |   text-transform: uppercase;
114 |   letter-spacing: 1px;
115 |   font-size: 70%;
116 | }
117 | hr {
118 |   border: 1px solid currentColor;
119 |   margin: 1.5em 0;
120 | }
121 | button {
122 |   background-color: linen;
123 |   padding: 0.5em 1em;
124 |   border-radius: 0.2em;
125 | }
126 | .custom-devtools {
127 |   height: min-content;
128 |   position: absolute;
129 |   background: hsl(288deg 100% 90% / 90%);
130 | }
131 | .custom-devtools.top-left {
132 |   left: 0;
133 |   top: 0;
134 |   border-end-end-radius: 0.5em;
135 |   box-shadow: 0 0 #0000, 0 0 #0000, 0 4px 6px -1px rgb(0 0 0/0.1),
136 |     0 2px 4px -2px rgb(0 0 0/0.1);
137 | }
138 | .custom-devtools.top-right {
139 |   right: 0;
140 |   top: 0;
141 |   border-end-start-radius: 0.5em;
142 |   box-shadow: 0 0 #0000, 0 0 #0000, 0 4px 6px -1px rgb(0 0 0/0.1),
143 |     0 2px 4px -2px rgb(0 0 0/0.1);
144 | }
145 | .custom-devtools.bottom-left {
146 |   bottom: 0;
147 |   left: 0;
148 |   box-shadow: 0 0 #0000, 0 0 #0000, 0 -4px 6px -1px rgb(0 0 0/0.1),
149 |     0 -2px 4px -2px rgb(0 0 0/0.1);
150 | }
151 | .custom-devtools.bottom-left,
152 | .custom-devtools.bottom-left header {
153 |   border-start-end-radius: 0.5em;
154 | }
155 | .custom-devtools.bottom-right {
156 |   bottom: 0;
157 |   right: 0;
158 |   box-shadow: 0 0 #0000, 0 0 #0000, 0 -4px 6px -1px rgb(0 0 0/0.1),
159 |     0 -2px 4px -2px rgb(0 0 0/0.1);
160 | }
161 | .custom-devtools.bottom-right,
162 | .custom-devtools.bottom-right header {
163 |   border-start-start-radius: 0.5em;
164 | }
165 | </style>
166 | 


--------------------------------------------------------------------------------