@nuxt/docs 0.0.0 → 3.17.0

package/2.guide/1.concepts/8.typescript.md

@@ -0,0 +1,97 @@
+---
+title: 'TypeScript'
+description: "Nuxt is fully typed and provides helpful shortcuts to ensure you have access to accurate type information when you are coding."
+---
+
+## Type-checking
+
+By default, Nuxt doesn't check types when you run [`nuxi dev`](/docs/api/commands/dev) or [`nuxi build`](/docs/api/commands/build), for performance reasons.
+
+To enable type-checking at build or development time, install `vue-tsc` and `typescript` as development dependency:
+
+::code-group{sync="pm"}
+
+  ```bash [npm]
+  npm install --save-dev vue-tsc typescript
+  ```
+
+  ```bash [yarn]
+  yarn add --dev vue-tsc typescript
+  ```
+
+  ```bash [pnpm]
+  pnpm add -D vue-tsc typescript
+  ```
+
+  ```bash [bun]
+  bun add -D vue-tsc typescript
+  ```
+
+::
+
+Then, run [`nuxi typecheck`](/docs/api/commands/typecheck) command to check your types:
+
+```bash [Terminal]
+npx nuxi typecheck
+```
+
+To enable type-checking at build or development time, you can also use the [`typescript.typeCheck`](/docs/api/nuxt-config#typecheck) option in your `nuxt.config` file:
+
+```ts twoslash [nuxt.config.ts]
+export default defineNuxtConfig({
+  typescript: {
+    typeCheck: true
+  }
+})
+```
+
+## Auto-generated Types
+
+When you run `nuxi dev` or `nuxi build`, Nuxt generates the following files for IDE type support (and type checking):
+
+### `.nuxt/nuxt.d.ts`
+
+This file contains the types of any modules you are using, as well as the key types that Nuxt requires. Your IDE should recognize these types automatically.
+
+Some of the references in the file are to files that are only generated within your `buildDir` (`.nuxt`) and therefore for full typings, you will need to run `nuxi dev` or `nuxi build`.
+
+### `.nuxt/tsconfig.json`
+
+This file contains the recommended basic TypeScript configuration for your project, including resolved aliases injected by Nuxt or modules you are using, so you can get full type support and path auto-complete for aliases like `~/file` or `#build/file`.
+
+::note
+Consider using the `imports` section of [nuxt.config](/docs/api/nuxt-config#imports) to include directories beyond the default ones. This can be useful for auto-importing types which you're using across your app.
+::
+
+[Read more about how to extend this configuration](/docs/guide/directory-structure/tsconfig).
+
+::tip{icon="i-lucide-video" to="https://youtu.be/umLI7SlPygY" target="_blank"}
+Watch a video from Daniel Roe explaining built-in Nuxt aliases.
+::
+
+::note
+Nitro also [auto-generates types](/docs/guide/concepts/server-engine#typed-api-routes) for API routes. Plus, Nuxt also generates types for globally available components and [auto-imports from your composables](/docs/guide/directory-structure/composables), plus other core functionality.
+::
+
+::note
+Keep in mind that all options extended from `./.nuxt/tsconfig.json` will be overwritten by the options defined in your `tsconfig.json`.
+Overwriting options such as `"compilerOptions.paths"` with your own configuration will lead TypeScript to not factor in the module resolutions from `./.nuxt/tsconfig.json`. This can lead to module resolutions such as `#imports` not being recognized.
+:br :br
+In case you need to extend options provided by `./.nuxt/tsconfig.json` further, you can use the [`alias` property](/docs/api/nuxt-config#alias) within your `nuxt.config`. `nuxi` will pick them up and extend `./.nuxt/tsconfig.json` accordingly.
+::
+
+## Strict Checks
+
+TypeScript comes with certain checks to give you more safety and analysis of your program.
+
+[Strict checks](https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html#getting-stricter-checks) are enabled by default in Nuxt to give you greater type safety.
+
+If you are currently converting your codebase to TypeScript, you may want to temporarily disable strict checks by setting `strict` to `false` in your `nuxt.config`:
+
+```ts twoslash [nuxt.config.ts]
+export default defineNuxtConfig({
+  typescript: {
+    strict: false
+  }
+})
+```

package/2.guide/1.concepts/9.code-style.md

@@ -0,0 +1,22 @@
+---
+title: 'Code Style'
+description: "Nuxt supports ESLint out of the box"
+---
+
+## ESLint
+
+The recommended approach for Nuxt is to enable ESLint support using the [`@nuxt/eslint`](https://eslint.nuxt.com/packages/module) module, that will setup project-aware ESLint configuration for you.
+
+:::callout{icon="i-lucide-lightbulb"}
+The module is designed for the [new ESLint flat config format](https://eslint.org/docs/latest/use/configure/configuration-files-new) with is the [default format since ESLint v9](https://eslint.org/blog/2024/04/eslint-v9.0.0-released/). If you are using the legacy `.eslintrc` config, you will need to [configure manually with `@nuxt/eslint-config`](https://eslint.nuxt.com/packages/config#legacy-config-format). We highly recommend you to migrate over the flat config to be future-proof.
+:::
+
+## Quick Setup
+
+```bash
+npx nuxi module add eslint
+```
+
+Start your Nuxt app, a `eslint.config.mjs` file will be generated under your project root. You can customize it as needed.
+
+You can learn more about the module and customizations in [Nuxt ESLint's documentation](https://eslint.nuxt.com/packages/module).

package/2.guide/2.directory-structure/.navigation.yml

@@ -0,0 +1,3 @@
+title: Directory Structure
+titleTemplate: '%s · Nuxt Directory Structure'
+icon: i-lucide-folders

package/2.guide/2.directory-structure/0.nuxt.md

@@ -0,0 +1,20 @@
+---
+title: ".nuxt"
+description: "Nuxt uses the .nuxt/ directory in development to generate your Vue application."
+head.title: ".nuxt/"
+navigation.icon: i-lucide-folder
+---
+
+::important
+This directory should be added to your [`.gitignore`](/docs/guide/directory-structure/gitignore) file to avoid pushing the dev build output to your repository.
+::
+
+This directory is interesting if you want to learn more about the files Nuxt generates based on your directory structure.
+
+Nuxt also provides a Virtual File System (VFS) for modules to add templates to this directory without writing them to disk.
+
+You can explore the generated files by opening the [Nuxt DevTools](https://devtools.nuxt.com) in development mode and navigating to the **Virtual Files** tab.
+
+::warning
+You should not touch any files inside since the whole directory will be re-created when running [`nuxt dev`](/docs/api/commands/dev).
+::

package/2.guide/2.directory-structure/0.output.md

@@ -0,0 +1,18 @@
+---
+title: ".output"
+description: "Nuxt creates the .output/ directory when building your application for production."
+head.title: ".output/"
+navigation.icon: i-lucide-folder
+---
+
+::important
+This directory should be added to your [`.gitignore`](/docs/guide/directory-structure/gitignore) file to avoid pushing the build output to your repository.
+::
+
+Use this directory to deploy your Nuxt application to production.
+
+:read-more{to="/docs/getting-started/deployment"}
+
+::warning
+You should not touch any files inside since the whole directory will be re-created when running [`nuxt build`](/docs/api/commands/build).
+::

package/2.guide/2.directory-structure/1.assets.md

@@ -0,0 +1,16 @@
+---
+title: "assets"
+description: "The assets/ directory is used to add all the website's assets that the build tool will process."
+head.title: "assets/"
+navigation.icon: i-lucide-folder
+---
+
+The directory usually contains the following types of files:
+
+- Stylesheets (CSS, SASS, etc.)
+- Fonts
+- Images that won't be served from the [`public/`](/docs/guide/directory-structure/public) directory.
+
+If you want to serve assets from the server, we recommend taking a look at the [`public/`](/docs/guide/directory-structure/public) directory.
+
+:read-more{to="/docs/getting-started/assets"}