1
npx nuxi@latest module add pinia

1
pnpm nuxt add layout <布局名称>

1
├── layouts
2
│   └── default
3
│       ├── index.vue
4
│       └── components
5
│           ├── Header.vue
6
│           └── Footer.vue
7
└── pages
8
    └── index
9
        ├── index.vue
10
        └── components
11
            ├── HorizontalRail.vue
12
            └── MasonryGrid.vue

1
export default defineNuxtConfig( {
2
    // ...
3
    components: [
4
        {
5
            path: "~/components",
6
            pathPrefix: true
7
        }, // 复制默认配置，避免被覆盖掉
8
        {
9
            path: "~/layouts",
10
            pattern: "**/components/**/*.vue",
11
            pathPrefix: true
12
        },
13
        {
14
            path: "~/pages",
15
            pattern: "**/components/**/*.vue",
16
            pathPrefix: true
17
        }
18
    ],
19
    // ...
20
} );

1
//components/HorizontalRail
2
//components/MasonryGrid

1
export default defineNuxtConfig( {
2
    // ...
3
    pages: {
4
        pattern: [
5
            "**/*.vue", // 复制默认配置，避免被覆盖掉
6
            "!**/components/**/*.vue"
7
        ]
8
    },
9
    // ...
10
} );

1
definePageMeta( {
2
    layout: ""
3
} );

1
<NuxtLayout name="default"></NuxtLayout>
2
<!-- 简写 -->
3
<NuxtLayout></NuxtLayout>

1
<NuxtLayout name="default" :foo="bar" :baz="qux">
2
    <!-- 页面内容 -->
3
</NuxtLayout>

1
<NuxtPage :foo="bar" :baz="qux">
2
    <!-- 页面内容 -->
3
</NuxtPage>

1
const token = useCookie( "token" )
2
console.log( token.value );

1
default: () => T | Ref<T>

1
const token = useCookie( "token", {
2
    default: () => "Bear 114514"
3
} );

1
const tk = useCookie( "tk", {
2
    default: () => "default"
3
} );
4

5
setTimeout( () => {
6
    tk.value = "updated";
7
}, 3000 )

1
const tk = useCookie( "tk", {
2
    default: () => "default"
3
} );
4

5
watch( () => tk.value, newVal => {
6
    console.log( "tk changed:", newVal ); // 浏览器里手动修改 tk 值，自动在此处打印
7
} );

1
export default defineNuxtConfig( {
2
    // ...
3
    experimental: {
4
        cookieStore: false,
5
    },
6
    // ...
7
} );

1
const token = useCookie( "token", {
2
    default: () => "default"
3
} );
4

5
watch( () => token.value, newVal => {
6
    console.log( "token 更新:", newVal );
7
} );
8

9
const login = async () => {
10
    await $fetch( "/api/token" ); // 后端讲 cooken 设置为 Bear 114514
11
    refreshCookie( "token" );
12
}

1
const login = async () => {
2
    await $fetch( "/api/token" );
3
    console.log( "refresh 之前：", token.value );
4
    refreshCookie( "token" );
5
    nextTick();
6
    console.log( "refresh 之后：", token.value );
7
}

1
refresh 之前： default
2
refresh 之后： default
3
token 更新: Bear 114514

1
watchEffect( () => {
2
    console.log( "[useFetch]", {
3
        pending: dataFetch.pending.value,
4
        status: dataFetch.status?.value,
5
        error: dataFetch.error.value,
6
        data: dataFetch.data.value,
7
    } );
8
} );

1
const fetchRes = await useFetch<{ data: FeedItem[]; total: number, hasMore: boolean }>( "/api/feed", {
2
    key: `feed:main-${ currentPage.value }`,
3
    query: computed( () => ( { page: currentPage.value, pageSize: pageSize.value, seed: "main" } ) )
4
} );

1
const fetchRes = await useFetch<{ data: FeedItem[]; total: number, hasMore: boolean }>( "/api/feed", {
2
    key: `feed:main-${ currentPage.value }`,
3
    query: computed( () => ( { page: currentPage.value, pageSize: pageSize.value, seed: "main" } ) ),
4
    watch: false
5
} );
6

7
function pageChange( page: number ) {
8
    currentPage.value = page;
9
    fetchRes.refresh();
10
}

1
Could not fetch from https://fonts.google.com/metadata/fonts. Will retry in 1000ms.

1
# nuxt module add 命令执行后，会自动在 `nuxt.config.ts` 文件里添加模块使用的相关配置
2
npx nuxt module add fonts

1
export default defineNuxtConfig({
2
    // ...
3
    fonts: {
4
        provider: "local"
5
    },
6
    // ...
7
})

1
@theme static {
2
    --font-sans: "Public Sans", sans-serif;
3
}

1
<link rel="preconnect" href="https://fonts.googleapis.com">
2
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
3
<link href="https://fonts.googleapis.com/css2?family=Playwrite+NZ+Basic:[email protected]&family=ZCOOL+KuaiLe&display=swap" rel="stylesheet">

1
export default defineNuxtConfig( {
2
    // ...
3
    app: {
4
        head: {
5
            link: [
6
                { rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Playwrite+NZ+Basic:[email protected]&family=ZCOOL+KuaiLe&display=swap" }
7
            ]
8
        }
9
    },
10
    // ...
11
} );

1
@theme static {
2
    --font-sans: "Playwrite New Zealand Basic", "ZCOOL KuaiLe", "Public Sans", sans-serif;
3
}

1
export default defineNuxtConfig( {
2
    // ...
3
    app: {
4
        head: {
5
            link: [
6
                {
7
                    rel: "stylesheet",
8
                    href: "https://font.webcache.cn/google/css2?family=Playwrite+NZ+Basic:[email protected]&family=ZCOOL+KuaiLe&display=swap"
9
                }
10
            ]
11
        }
12
    }
13
    // ...
14
} );

1
✔ Nuxt Icon discovered local-installed 2 collections: lucide, simple-icons

1
<UIcon name="i-lucide-battery-full" />

1
<UIcon name="i-material-symbols-10k" />

1
WARN  [Icon] Collection material-symbols is not found locally                                                                                                                                                                          15:27:39
2
We suggest to install it via npm i -D @iconify-json/material-symbols to provide the best end-user experience.

1
pnpm add -D @iconify-json/material-symbols

1
✔ Nuxt Icon discovered local-installed 3 collections: lucide, material-symbols, simple-icons

1
pnpm add -D @iconify-json/[图标库名称]