Compare commits

...

14 Commits

Author SHA1 Message Date
Matt
6c7f539f99
Merge 7b69dc9463 into 9bf8465806 2024-11-19 23:30:27 +02:00
Jan-Niklas W.
9bf8465806
docs: update getting started to include WebStorm (#29845) 2024-11-19 20:39:14 +00:00
renovate[bot]
f94d3f2bc6
chore(deps): update resolutions @types/node to v22.9.1 (main) (#29981)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-11-19 15:32:36 -05:00
renovate[bot]
9c8cd4b74b
chore(deps): update devdependency eslint-plugin-perfectionist to v4 (main) (#29982)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Daniel Roe <daniel@roe.dev>
2024-11-19 15:32:33 -05:00
Matt Clegg
7b69dc9463 docs: more clarity on auto imports 2024-11-08 10:17:38 +00:00
Matt Clegg
bbf481fb26 fix: removed nuxt domain from link 2024-11-08 08:39:49 +00:00
Matt Clegg
6666197364 fix: removed previous version of text 2024-11-08 08:33:54 +00:00
Matt Clegg
dc229914c7 docs: added link to opting in to nuxt 4 page 2024-11-08 08:22:08 +00:00
Matt Clegg
d2540e45d0 fix: fixed typo 2024-11-08 08:20:03 +00:00
Matt
9bb36478ff
Merge branch 'nuxt:main' into docs/shared-folder 2024-11-07 10:52:53 +00:00
Matt Clegg
519df56854 docs: added clarity to shared folder auto imports 2024-11-06 12:02:58 +00:00
Matt Clegg
dad9d00008 Merge remote-tracking branch 'origin/docs/shared-folder' into docs/shared-folder
# Conflicts:
#	docs/2.guide/2.directory-structure/1.shared.md
2024-11-06 10:50:52 +00:00
Matt Clegg
cb9a4ec847 docs: first pass at the shared directory documentation 2024-11-06 10:50:01 +00:00
Matt Clegg
bcef9571dd docs: first pass at the shared directory documentation 2024-11-06 10:46:54 +00:00
5 changed files with 281 additions and 257 deletions

View File

@ -21,8 +21,8 @@ Or follow the steps below to set up a new Nuxt project on your computer.
<!-- markdownlint-disable-next-line MD001 -->
#### Prerequisites
- **Node.js** - [`v18.0.0`](https://nodejs.org/en) or newer
- **Text editor** - We recommend [Visual Studio Code](https://code.visualstudio.com/) with the [official Vue extension](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (previously known as Volar)
- **Node.js** - [`18.x`](https://nodejs.org/en) or newer (but we recommend the [active LTS release](https://github.com/nodejs/release#release-schedule))
- **Text editor** - There is no IDE requirement, but we recommend [Visual Studio Code](https://code.visualstudio.com/) with the [official Vue extension](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (previously known as Volar) or [WebStorm](https://www.jetbrains.com/webstorm/), which, along with [other JetBrains IDEs](https://www.jetbrains.com/ides/), offers great Nuxt support right out-of-the-box.
- **Terminal** - In order to run Nuxt commands
::note

View File

@ -0,0 +1,98 @@
---
title: 'shared'
head.title: 'shared/'
description: 'Use the shared/ directory to share functionality between the Vue app and the Nitro server.'
navigation.icon: 'i-ph-folder'
---
The `shared/` directory allows you to share code that can be used in both the Vue app and the Nitro server.
::tip
The `shared/` directory is available in Nuxt v3.14+.
::
::important
Code in the `shared/` directory cannot import any Vue or Nitro code.
::
## Usage
**Method 1:** Using named export
```ts twoslash [shared/utils/capitalize.ts]
export const capitalize = (input: string) => {
return input[0].toUpperCase() + input.slice(1)
}
```
**Method 2:** Using default export
```ts twoslash [shared/utils/capitalize.ts]
export default function capitalize (input: string) {
return input[0].toUpperCase() + input.slice(1)
}
```
**Usage:** You can now use auto-imported utility functions in `.js`, `.ts` and `.vue` files within your Vue app and the `server/` directory.
If you have [set `compatibilityVersion: 4` in your `nuxt.config.ts`](/docs/getting-started/upgrade#opting-in-to-nuxt-4), you can use the auto-imported functions in the `app/` directory. This is part of Nuxt's progressive compatibility features preparing for version 4.
```vue [app.vue]
<script setup lang="ts">
const hello = capitalize('hello')
</script>
<template>
<div>
{{ hello }}
</div>
</template>
```
```ts [server/api/hello.get.ts]
export default defineEventHandler((event) => {
return {
hello: capitalize('hello')
}
})
```
## Auto Imports
Only files in the `shared/utils/` and `shared/types/` directories will be auto-imported. Files nested within subdirectories of these directories will not be auto-imported.
::tip
The way `shared/utils` and `shared/types` auto-imports work and are scanned is identical to the [`composables/`](/docs/guide/directory-structure/composables) and [`utils/`](/docs/guide/directory-structure/utils) directories.
::
:read-more{to="/docs/guide/directory-structure/composables#how-files-are-scanned"}
```bash [Directory Structure]
-| shared/
---| capitalize.ts # Not auto-imported
---| formatters
-----| lower.ts # Not auto-imported
---| utils/
-----| lower.ts # Auto-imported
-----| formatters
-------| upper.ts # Not auto-imported
---| types/
-----| bar.d.ts # Auto-imported
```
Any other files you create in the `shared/` folder must be manually imported using the `#shared` alias (automatically configured by Nuxt):
```ts
// For files directly in the shared directory
import capitalize from '#shared/capitalize'
// For files in nested directories
import lower from '#shared/formatters/lower'
// For files nested in a folder within utils
import upper from '#shared/utils/formatters/upper'
```
This alias ensures consistent imports across your application, regardless of the importing file's location.
:read-more{to="/docs/guide/concepts/auto-imports"}

View File

@ -189,7 +189,6 @@ export default createConfigForNuxt({
},
},
// Sort rule keys in eslint config
// @ts-expect-error incorrect types 🤔
{
files: ['**/eslint.config.mjs'],
name: 'local/sort-eslint-config',

View File

@ -40,7 +40,7 @@
"@nuxt/ui-templates": "workspace:*",
"@nuxt/vite-builder": "workspace:*",
"@nuxt/webpack-builder": "workspace:*",
"@types/node": "22.9.0",
"@types/node": "22.9.1",
"@unhead/dom": "1.11.11",
"@unhead/shared": "1.11.11",
"@unhead/vue": "1.11.11",
@ -75,7 +75,7 @@
"@nuxt/webpack-builder": "workspace:*",
"@testing-library/vue": "8.1.0",
"@types/eslint__js": "8.42.3",
"@types/node": "22.9.0",
"@types/node": "22.9.1",
"@types/semver": "7.5.8",
"@unhead/schema": "1.11.11",
"@unhead/vue": "1.11.11",
@ -91,7 +91,7 @@
"devalue": "5.1.1",
"eslint": "9.15.0",
"eslint-plugin-no-only-tests": "3.3.0",
"eslint-plugin-perfectionist": "3.9.1",
"eslint-plugin-perfectionist": "4.0.2",
"eslint-typegen": "0.3.2",
"h3": "npm:h3-nightly@2.0.0-1718872656.6765a6e",
"happy-dom": "15.11.6",

File diff suppressed because it is too large Load Diff