+
-
-
+
+
diff --git a/packages/devtools/client/components/AssetDetails.vue b/packages/devtools/client/components/AssetDetails.vue
index 541773fe33..0378792fed 100644
--- a/packages/devtools/client/components/AssetDetails.vue
+++ b/packages/devtools/client/components/AssetDetails.vue
@@ -66,7 +66,7 @@ async function saveTextContent() {
const config = useServerConfig()
const hasNuxtImage = computed(() => {
const modules = config.value?._installedModules || []
- return modules.some(m => m.meta?.name === '@nuxt/image' || m.meta?.name === '@nuxt/image-edge')
+ return modules.some(m => m.meta?.name === '@nuxt/image' || m.meta?.name === '@nuxt/image-edge' || m.meta?.name === '@nuxt/image-nightly')
})
const codeSnippets = computed(() => {
diff --git a/packages/devtools/client/components/BuildAnalyzeDetails.vue b/packages/devtools/client/components/BuildAnalyzeDetails.vue
index 7e56f183ec..708a6fab16 100644
--- a/packages/devtools/client/components/BuildAnalyzeDetails.vue
+++ b/packages/devtools/client/components/BuildAnalyzeDetails.vue
@@ -12,7 +12,8 @@ const props = defineProps<{
}>()
const runtimeConfig = useRuntimeConfig()
-const ROUTE_ANALYZE = `${runtimeConfig.app.baseURL}/__nuxt_devtools__/analyze/`.replace(/\/+/g, '/')
+const CLIENT_BASE = '/__nuxt_devtools__/client'
+const ROUTE_ANALYZE = `${runtimeConfig.app.baseURL.replace(CLIENT_BASE, '/')}/__nuxt_devtools__/analyze/`.replace(/\/+/g, '/')
const tabs = computed(() => {
const items = [
@@ -95,7 +96,7 @@ async function clear(name: string) {
+
-export const RC_PATH = '.nuxtrc'
-const pathRegex = /[\\/]@nuxt[\\/]devtools[\\/]/
-
-export async function enable(cwd: string) {
- const rc = readUser(RC_PATH)
- consola.info('Installed Nuxt DevTools...')
- await execa('npm', ['install', '-g', `${moduleName}@latest`], { stdio: 'inherit' })
-
- markEnable(rc, cwd)
- consola.info('Nuxt DevTools enabled! Restart your Nuxt app to start using it.')
-}
-
-function markEnable(rc: RC, path: string) {
- const modulePath = resolve(globalDirs.npm.packages, moduleName)
- const targetPath = resolve(modulePath, 'module.cjs').replace(/\\/g, '/')
-
- if (!fs.existsSync(targetPath))
- throw new Error('Failed to locate the global Nuxt DevTools module. You may try it again')
-
- // remove all entries
- removeModule(rc)
-
- if (!rc.modules?.includes(targetPath))
- rc.modules = [...rc.modules || [], targetPath]
-
- if (!rc.devtoolsGlobal)
- rc.devtoolsGlobal = {}
- if (!rc.devtoolsGlobal.projects)
- rc.devtoolsGlobal.projects = []
- if (!rc.devtoolsGlobal.projects.includes(path))
- rc.devtoolsGlobal.projects.push(path)
-
- writeUser(rc, RC_PATH)
-}
-
-export function disableSilently(cwd: string) {
- const rc = readUser(RC_PATH)
- if (markDisable(rc, cwd))
- writeUser(rc, RC_PATH)
-}
-
-export async function disable(cwd: string, args: string[]) {
- const rc = readUser(RC_PATH)
- const isRemove = args.includes('--remove')
-
- if (markDisable(rc, cwd))
- consola.success('Nuxt DevTools disabled for this project.')
- else if (!isRemove)
- consola.warn('Nuxt DevTools is not enabled for this project.')
-
- if (isRemove) {
- removeModule(rc)
- consola.success('Nuxt DevTools is removed globally')
- }
-
- writeUser(rc, RC_PATH)
-}
-
-function markDisable(rc: RC, path: string) {
- if (rc?.devtoolsGlobal?.projects?.includes(path)) {
- rc.devtoolsGlobal.projects = rc.devtoolsGlobal.projects.filter((p: string) => p !== path)
- return true
- }
- // remove module if no projects
- if (!rc?.devtoolsGlobal?.projects?.length)
- removeModule(rc)
- return false
-}
-
-export function removeModule(rc: RC) {
- if (Array.isArray(rc.modules))
- rc.modules = rc.modules.filter((p: string) => !p.match(pathRegex))
- return true
-}
diff --git a/packages/devtools-wizard/src/index.ts b/packages/devtools-wizard/src/index.ts
index 2aa51d545b..46cb902dab 100644
--- a/packages/devtools-wizard/src/index.ts
+++ b/packages/devtools-wizard/src/index.ts
@@ -1,7 +1,6 @@
import { consola } from 'consola'
import { colors } from 'consola/utils'
import { readPackageJSON } from 'pkg-types'
-import semver from 'semver'
import { name as moduleName, version } from '../package.json'
async function getNuxtVersion(path: string): Promise {
@@ -27,31 +26,21 @@ async function run() {
consola.log(`${colors.inverse(colors.bold(colors.green(' DevTools ')))} ${colors.green(`v${version}`)}`)
consola.log(`\n${colors.gray('Learn more at https://devtools.nuxt.com\n')}`)
- if (moduleName.endsWith('-edge'))
- throw new Error('Edge release of Nuxt DevTools requires to be installed locally. Learn more at https://github.com/nuxt/devtools/#edge-release-channel')
+ if (moduleName.endsWith('-edge') || moduleName.endsWith('-nightly'))
+ throw new Error('Nightly release of Nuxt DevTools requires to be installed locally. Learn more at https://github.com/nuxt/devtools/#nightly-release-channel')
const nuxtVersion = await getNuxtVersion(cwd)
if (!nuxtVersion) {
- consola.error('Unable to find any installed nuxt version icurrent directory')
+ consola.error('Unable to find any installed nuxt version in the current directory')
process.exit(1)
}
- // Nuxt 3.4.0 will have devtools built-in
- // https://github.com/nuxt/nuxt/pull/20126
- const isDevToolsBuiltIn = semver.gte(nuxtVersion, '3.4.0')
-
if (command === 'enable') {
consola.log(colors.green('Enabling Nuxt DevTools...'))
- if (isDevToolsBuiltIn)
- await import('./builtin').then(r => r.enable(cwd))
- else
- await import('./global').then(r => r.enable(cwd))
+ await import('./builtin').then(r => r.enable(cwd))
}
else if (command === 'disable') {
consola.log(colors.magenta('Disabling Nuxt DevTools...'))
- if (isDevToolsBuiltIn)
- await import('./builtin').then(r => r.disable(cwd))
- else
- await import('./global').then(r => r.disable(cwd, args))
+ await import('./builtin').then(r => r.disable(cwd))
}
else if (!command) {
consola.log(`npx ${moduleName} enable|disable`)
diff --git a/packages/devtools/.discoveryrc.cjs b/packages/devtools/.discoveryrc.cjs
new file mode 100644
index 0000000000..23a3ed4535
--- /dev/null
+++ b/packages/devtools/.discoveryrc.cjs
@@ -0,0 +1,13 @@
+const { join } = require('node:path')
+
+module.exports = {
+ name: 'Nuxt Server Data',
+ basedir: join(__dirname, 'discovery'),
+ embed: true,
+ // view: {
+ // assets: [
+ // './pages/common.css',
+ // './pages/default.js',
+ // ],
+ // },
+}
diff --git a/packages/devtools/client/app.config.ts b/packages/devtools/client/app.config.ts
index b02c4ee482..8498ea7330 100644
--- a/packages/devtools/client/app.config.ts
+++ b/packages/devtools/client/app.config.ts
@@ -1,3 +1,5 @@
+import { defineAppConfig } from '#imports'
+
export default defineAppConfig({
fixture1: 'from app.config.ts',
})
diff --git a/packages/devtools/client/app.vue b/packages/devtools/client/app.vue
index c7af7d500b..92d5582cb0 100644
--- a/packages/devtools/client/app.vue
+++ b/packages/devtools/client/app.vue
@@ -9,6 +9,7 @@ import { useCopy } from '~/composables/editor'
import { rpc } from '~/composables/rpc'
import { registerCommands } from '~/composables/state-commands'
import { splitScreenAvailable, splitScreenEnabled } from '~/composables/storage'
+import { useSchemaInput } from './composables/state-schema'
import { useDevToolsOptions } from './composables/storage-options'
import { setupClientRPC } from './setup/client-rpc'
import { setupVueDevTools } from './setup/vue-devtools'
@@ -65,7 +66,7 @@ useEventListener('keydown', (e) => {
})
const { scale, sidebarExpanded } = useDevToolsOptions('ui')
-// const dataSchema = useSchemaInput()
+const dataSchema = useSchemaInput()
onMounted(async () => {
const injectClient = useInjectionClient()
@@ -157,8 +158,8 @@ registerCommands(() => [
{{ formatFileSize(current.size.clientBundle) }}
diff --git a/packages/devtools/client/components/CommandPalette.vue b/packages/devtools/client/components/CommandPalette.vue
index fea5b05a58..1c44d6eb60 100644
--- a/packages/devtools/client/components/CommandPalette.vue
+++ b/packages/devtools/client/components/CommandPalette.vue
@@ -1,9 +1,9 @@
-
-
- {{ override }}
-
-
- {{ parsed.moduleName }}
-
- {{ parsed.path.slice(parsed.moduleName.length) }}
-
-
-
- {{ parsed.path }}
-
-
+
+
+
+ {{ override }}
+
+
+ {{ parsed.moduleName }}
+
+ {{ parsed.path.slice(parsed.moduleName.length) }}
+
+
+
+ {{ parsed.path }}
+
+
+ = (a: T, b: T) => number
diff --git a/packages/devtools/client/components/ModuleItemBase.vue b/packages/devtools/client/components/ModuleItemBase.vue
index 3df52a3172..34b336fb84 100644
--- a/packages/devtools/client/components/ModuleItemBase.vue
+++ b/packages/devtools/client/components/ModuleItemBase.vue
@@ -93,19 +93,32 @@ const openInEditor = useOpenInEditor()
+
+
+
+
diff --git a/packages/devtools/client/components/ModuleInstallList.vue b/packages/devtools/client/components/ModuleInstallList.vue
index d06275c106..d01f6d3006 100644
--- a/packages/devtools/client/components/ModuleInstallList.vue
+++ b/packages/devtools/client/components/ModuleInstallList.vue
@@ -2,9 +2,9 @@
import type { ModuleStaticInfo } from '../../src/types'
import Fuse from 'fuse.js'
import { computed, ref } from 'vue'
-import { useModulesList } from '~/composables/state-modules'
// @ts-expect-error missing types
import { RecycleScroller } from 'vue-virtual-scroller'
+import { useModulesList } from '~/composables/state-modules'
type SortingFunction
-
+
+
+
+
+
+
+
+
-import { useRoute } from '#app/composables/router'
import type { TreeNode } from '~/composables/tree'
+import { useRoute } from '#app/composables/router'
withDefaults(defineProps<{
node: TreeNode
diff --git a/packages/devtools/client/components/PluginItem.vue b/packages/devtools/client/components/PluginItem.vue
index 9497004d87..17dcc6587b 100644
--- a/packages/devtools/client/components/PluginItem.vue
+++ b/packages/devtools/client/components/PluginItem.vue
@@ -18,29 +18,31 @@ const shortPath = computed(() => parseReadablePath(props.plugin.src, config.valu
+
+
{{ index }}
-
-
+
+
+
+