Debugging
In Nuxt 3, you can get started with debugging your application directly in the browser as well as in your IDE.
Sourcemaps
Sourcemaps are enabled for your server build by default, and for the client build in dev mode, but you can enable them more specifically in your configuration.
export default defineNuxtConfig({ // or sourcemap: true sourcemap: { server: true, client: true }})Debugging in Your IDE
It is possible to debug your Nuxt app in your IDE while you are developing it.
Example VS Code Debug Configuration
You may need to update the config below with a path to your web browser. For more information, visit theVS Code documentation about debug configuration.
{ // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. "version": "0.2.0", "configurations": [ { "type": "chrome", "request": "launch", "name": "client: chrome", "url": "http://localhost:3000", "webRoot": "${workspaceFolder}" }, { "type": "node", "request": "launch", "name": "server: nuxt", "outputCapture": "std", "program": "${workspaceFolder}/node_modules/nuxi/bin/nuxi.mjs", "args": [ "dev" ], } ], "compounds": [ { "name": "fullstack: nuxt", "configurations": [ "server: nuxt", "client: chrome" ] } ]}If you prefer your usual browser extensions, add this to thechrome configuration above:
"userDataDir":false,Example JetBrains IDEs Debug Configuration
You can also debug your Nuxt app in JetBrains IDEs such as IntelliJ IDEA, WebStorm, or PhpStorm.
- Create a new file in your project root directory and name it
nuxt.run.xml. - Open the
nuxt.run.xmlfile and paste the following debug configuration:
<component name="ProjectRunConfigurationManager"> <configuration default="false" name="client: chrome" type="JavascriptDebugType" uri="http://localhost:3000" useFirstLineBreakpoints="true"> <method v="2" /> </configuration> <configuration default="false" name="server: nuxt" type="NodeJSConfigurationType" application-parameters="dev" path-to-js-file="$PROJECT_DIR$/node_modules/nuxi/bin/nuxi.mjs" working-dir="$PROJECT_DIR$"> <method v="2" /> </configuration> <configuration default="false" name="fullstack: nuxt" type="CompoundRunConfigurationType"> <toRun name="client: chrome" type="JavascriptDebugType" /> <toRun name="server: nuxt" type="NodeJSConfigurationType" /> <method v="2" /> </configuration></component>Other IDEs
If you have another IDE and would like to contribute sample configuration, feel free toopen a PR!
Custom Routing
In Nuxt 3, your routing is defined by the structure of your files inside the pages directory. However, since it uses vue-router under the hood, Nuxt offers you several ways to add custom routes in your project.
Runtime Config
Nuxt provides a runtime config API to expose configuration and secrets within your application.