diff --git a/packages/devtools-kit/src/_types/integrations.ts b/packages/devtools-kit/src/_types/integrations.ts index 829636ac7e..0164553bda 100644 --- a/packages/devtools-kit/src/_types/integrations.ts +++ b/packages/devtools-kit/src/_types/integrations.ts @@ -37,6 +37,7 @@ export interface NpmCommandOptions { export interface AutoImportsWithMetadata { imports: Import[] metadata?: UnimportMeta + dirs: string[] } export interface RouteInfo extends Pick { diff --git a/packages/devtools/client/components/ComposableTree.vue b/packages/devtools/client/components/ComposableTree.vue index 38f77da3de..d11c270f2e 100644 --- a/packages/devtools/client/components/ComposableTree.vue +++ b/packages/devtools/client/components/ComposableTree.vue @@ -13,7 +13,12 @@ defineProps<{
- +
diff --git a/packages/devtools/client/components/HelpFab.vue b/packages/devtools/client/components/HelpFab.vue new file mode 100644 index 0000000000..05215e7bd3 --- /dev/null +++ b/packages/devtools/client/components/HelpFab.vue @@ -0,0 +1,69 @@ + + + + + diff --git a/packages/devtools/client/components/content/HelpImportsDirs.vue b/packages/devtools/client/components/content/HelpImportsDirs.vue new file mode 100644 index 0000000000..9b3af544c7 --- /dev/null +++ b/packages/devtools/client/components/content/HelpImportsDirs.vue @@ -0,0 +1,11 @@ + + + diff --git a/packages/devtools/client/components/content/HelpImportsModules.vue b/packages/devtools/client/components/content/HelpImportsModules.vue new file mode 100644 index 0000000000..2aee086a00 --- /dev/null +++ b/packages/devtools/client/components/content/HelpImportsModules.vue @@ -0,0 +1,15 @@ + + + diff --git a/packages/devtools/client/components/content/HelpTip.vue b/packages/devtools/client/components/content/HelpTip.vue new file mode 100644 index 0000000000..5e5a6f7990 --- /dev/null +++ b/packages/devtools/client/components/content/HelpTip.vue @@ -0,0 +1,22 @@ + + + diff --git a/packages/devtools/client/components/content/HelpTipPerformance.vue b/packages/devtools/client/components/content/HelpTipPerformance.vue new file mode 100644 index 0000000000..cd2d7664cc --- /dev/null +++ b/packages/devtools/client/components/content/HelpTipPerformance.vue @@ -0,0 +1,9 @@ + diff --git a/packages/devtools/client/composables/storage.ts b/packages/devtools/client/composables/storage.ts index 21a705cbfb..640dfc719d 100644 --- a/packages/devtools/client/composables/storage.ts +++ b/packages/devtools/client/composables/storage.ts @@ -11,6 +11,7 @@ const devToolsSettings = useLocalStorage('nuxt-devtools-sett componentsGraphShowWorkspace: true, interactionCloseOnOutsideClick: false, showExperimentalFeatures: false, + showHelpButtons: true, scale: 1, hiddenTabs: [], hiddenTabCategories: [], diff --git a/packages/devtools/client/content/components.md b/packages/devtools/client/content/components.md new file mode 100644 index 0000000000..7c6d580252 --- /dev/null +++ b/packages/devtools/client/content/components.md @@ -0,0 +1,5 @@ +# Components + +Vue components under the `components/` directory are automatically registered and can be used in your templates without importing them. + +[Learn more on the documentation](https://nuxt.com/docs/guide/directory-structure/components) diff --git a/packages/devtools/client/content/hooks.md b/packages/devtools/client/content/hooks.md new file mode 100644 index 0000000000..df91099784 --- /dev/null +++ b/packages/devtools/client/content/hooks.md @@ -0,0 +1,5 @@ +# Hooks + +Hooks are an advanced API mainly for module authors or advanced use cases. The hooking system to expand almost every aspect of Nuxt. It's powered by [unjs/hookable](https://github.com/unjs/hookable). + +[Learn more about hooks](https://nuxt.com/docs/guide/going-further/hooks). diff --git a/packages/devtools/client/content/imports.md b/packages/devtools/client/content/imports.md new file mode 100644 index 0000000000..b7c45d0dbe --- /dev/null +++ b/packages/devtools/client/content/imports.md @@ -0,0 +1,17 @@ +# Auto imports + +Nuxt auto-imports helper functions, composables and Vue APIs to use across your application without explicitly importing them. Based on the directory structure, every Nuxt application can also use auto-imports for its own components, composables and plugins. Components, composables or plugins can use these functions. + +
+ +According to your config, exports of files under the following folders will be registed as auto-imports entry: + +:help-imports-dirs + +Meanwhile, modules could also provide auto-imports for their own components. You have auto-imports from the following modules as well: + +:help-imports-modules + +
+ +[Learn more on the documentation](https://nuxt.com/docs/guide/concepts/auto-imports) diff --git a/packages/devtools/client/content/modules.md b/packages/devtools/client/content/modules.md new file mode 100644 index 0000000000..6ae03db3d5 --- /dev/null +++ b/packages/devtools/client/content/modules.md @@ -0,0 +1,5 @@ +# Modules + +Nuxt provides a module system to extend the framework core and simplify integrations. You don't need to develop everything from scratch or maintain boilerplate if there is already a Nuxt module for it. Adding Nuxt modules is possible using `nuxt.config`. + +[Learn more on the documentation](https://nuxt.com/docs/guide/concepts/modules) diff --git a/packages/devtools/client/content/pages.md b/packages/devtools/client/content/pages.md new file mode 100644 index 0000000000..2e6dd0769e --- /dev/null +++ b/packages/devtools/client/content/pages.md @@ -0,0 +1,5 @@ +# Pages + +One core feature of Nuxt is the file system router. Every Vue file inside the `pages/` directory creates a corresponding URL (or route) that displays the contents of the file. By using dynamic imports for each page, Nuxt leverages code-splitting to ship the minimum amount of JavaScript for the requested route. + +[Learn more on the documentation](https://nuxt.com/docs/getting-started/routing) diff --git a/packages/devtools/client/content/payload.md b/packages/devtools/client/content/payload.md new file mode 100644 index 0000000000..6bf07d3f6a --- /dev/null +++ b/packages/devtools/client/content/payload.md @@ -0,0 +1,3 @@ +# State & Async Data + +// TODO diff --git a/packages/devtools/client/content/plugins.md b/packages/devtools/client/content/plugins.md new file mode 100644 index 0000000000..a7a6f20ee3 --- /dev/null +++ b/packages/devtools/client/content/plugins.md @@ -0,0 +1,9 @@ +# Plugins + +Nuxt plugins allows you to extend the functionality of Nuxt runtime and the Vue instance. You can add plugins to the `plugins/` directory and they will be automatically imported and registered. + +::help-tip-performance +Plugins runs before your application at runtime, the time each plugin cost will directly affect your application's initial loading time. +:: + +[Learn more on the documentation](https://nuxt.com/docs/guide/directory-structure/plugins) diff --git a/packages/devtools/client/content/runtime-configs.md b/packages/devtools/client/content/runtime-configs.md new file mode 100644 index 0000000000..97e45bd2ab --- /dev/null +++ b/packages/devtools/client/content/runtime-configs.md @@ -0,0 +1,3 @@ +# Runtime Configs + +// TODO: diff --git a/packages/devtools/client/content/virtual-files.md b/packages/devtools/client/content/virtual-files.md new file mode 100644 index 0000000000..a87d9b1b22 --- /dev/null +++ b/packages/devtools/client/content/virtual-files.md @@ -0,0 +1,3 @@ +# Virtual Files + +Virtual files are generated on the fly to support the conventions of the framework, and to provide a better developer experience. diff --git a/packages/devtools/client/nuxt.config.ts b/packages/devtools/client/nuxt.config.ts index e0158bdbb0..c0d0395936 100644 --- a/packages/devtools/client/nuxt.config.ts +++ b/packages/devtools/client/nuxt.config.ts @@ -10,6 +10,7 @@ function r(p: string) { export default defineNuxtConfig({ modules: [ 'nuxt-vitest', + '@nuxt/content', '~/modules/custom-tabs', DevToolsUiKit, DevTools, diff --git a/packages/devtools/client/pages/modules/components.vue b/packages/devtools/client/pages/modules/components.vue index 6fa80896dc..c6cf41bf21 100644 --- a/packages/devtools/client/pages/modules/components.vue +++ b/packages/devtools/client/pages/modules/components.vue @@ -53,4 +53,6 @@ function toggleView() { + + diff --git a/packages/devtools/client/pages/modules/hooks.vue b/packages/devtools/client/pages/modules/hooks.vue index acd66fc650..555aa8c9e3 100644 --- a/packages/devtools/client/pages/modules/hooks.vue +++ b/packages/devtools/client/pages/modules/hooks.vue @@ -30,4 +30,6 @@ const clientHooks = computed(() => client.value?.getClientHooksMetrics()) + + diff --git a/packages/devtools/client/pages/modules/imports.vue b/packages/devtools/client/pages/modules/imports.vue index fe8af19456..dc8ce4340f 100644 --- a/packages/devtools/client/pages/modules/imports.vue +++ b/packages/devtools/client/pages/modules/imports.vue @@ -71,7 +71,7 @@ const filtered = computed(() => { diff --git a/packages/devtools/client/pages/modules/modules.vue b/packages/devtools/client/pages/modules/modules.vue index 5f1d42e655..2167226d5a 100644 --- a/packages/devtools/client/pages/modules/modules.vue +++ b/packages/devtools/client/pages/modules/modules.vue @@ -70,4 +70,6 @@ watchEffect(() => { + + diff --git a/packages/devtools/client/pages/modules/pages.vue b/packages/devtools/client/pages/modules/pages.vue index b2f8bab57a..3c032f06e8 100644 --- a/packages/devtools/client/pages/modules/pages.vue +++ b/packages/devtools/client/pages/modules/pages.vue @@ -138,4 +138,6 @@ function navigateToRoute(path: string) { }, ]" /> + + diff --git a/packages/devtools/client/pages/modules/payload.vue b/packages/devtools/client/pages/modules/payload.vue index d087bdc0c7..516b10afc6 100644 --- a/packages/devtools/client/pages/modules/payload.vue +++ b/packages/devtools/client/pages/modules/payload.vue @@ -65,4 +65,6 @@ async function refreshData(keys?: string[]) { /> + + diff --git a/packages/devtools/client/pages/modules/plugins.vue b/packages/devtools/client/pages/modules/plugins.vue index 91caa19625..53d1acbd1e 100644 --- a/packages/devtools/client/pages/modules/plugins.vue +++ b/packages/devtools/client/pages/modules/plugins.vue @@ -31,9 +31,6 @@ const plugins = computed((): PluginInfoWithMetic[] => { text="Plugins" :description="`Total plugins: ${config.plugins.length}`" > - - Plugins runs before your application at runtime, the time plugins cost will directly affect your application's initial loading time. -
{ />
+ + diff --git a/packages/devtools/client/pages/modules/runtime-configs.vue b/packages/devtools/client/pages/modules/runtime-configs.vue index 8b719a40ff..fa5fc7feb7 100644 --- a/packages/devtools/client/pages/modules/runtime-configs.vue +++ b/packages/devtools/client/pages/modules/runtime-configs.vue @@ -49,4 +49,6 @@ const privateConfig = computed(() => { + + diff --git a/packages/devtools/client/pages/modules/virtual-files.vue b/packages/devtools/client/pages/modules/virtual-files.vue index 2884534652..6bf9f05642 100644 --- a/packages/devtools/client/pages/modules/virtual-files.vue +++ b/packages/devtools/client/pages/modules/virtual-files.vue @@ -108,6 +108,8 @@ const filteredFiles = computed(() => { + +