25 个 Nuxt3 开发技巧

<!-尽快加载 -->
<Modal v-if="showModal" />

<!-只有当 showModal = true 时加载 -->
<LazyModal v-if="showModal" />

export default defineNuxtConfig({
  nitro: {
    prerender: {
      routes: ['/about', '/blog'],
    },
  },
})

const storage = useStorage()
const key = 'session:token'

// 保存值
await storage.setItem(key, sessionToken)

// …并在不同接口中调用
const token = await storage.getItem(key)

<script setup>
// 我们可以使用已导入的路由和用户，而无需自行导入
const { path, params } = useRoute();
const userData = useCustomComposable();
</script>

useHead({
  titleTemplate: title => `${title} | My Website`,
  script: [
    {
      src: 'https://www.scripts.com/some/other/script.js',
      body: true
    }
  ]
})

const route = useRoute()

console.log(route.fullPath)
// https://www.website.com/?search=hello%20there

console.log(route.query.search)
// there

<NuxtErrorBoundary>
  <NuxtPage />
  <template #error="{ error }">
    <div>
      <p>
        Oh no, something broke when loading the lesson!
        <code>{{ error }}</code>
      </p>
      <p>
        <button
          class="hover:cursor-pointer"
          @click="clearError(error)"
        >
          Go to the first lesson
        </button>
      </p>
    </div>
  </template>
</NuxtErrorBoundary>

// pages/one/two/three.vue
<template>
  <!-这个嵌套的 NuxtPage 渲染子路由 -->
  <NuxtPage />
</template>

one/
- two/
- - three/

// 使用 ~/assets
<script setup>
import image from '~/assets/image.png';
</script>
<template>
  <img :src="image" />
</template>

// 使用 ~/public
<template>
  <img src="/image.png" />
</template>

import image from '~/assets/image.png'
import style from '~/assets/style.css'

// 从 ~/assets 导入时会发现丢失的资产
import missingImage from '~/assets/missing-image.png'; 
// 构建错误

// 从 ~/public 引用不会捕获丢失的资产
// 在模板中: <img src="/missing-image.png" /> 
// 不会构建错误

// 从 ~/public 访问文件
yourwebsite.com/robots.txt
yourwebsite.com/favicon.ico
yourwebsite.com/sitemap.xml

// ~/components/MyLink.ts

// 在开发过程中只对预置链接着色
export default defineNuxtLink({
  componentName: 'MyLink',
  prefetchedClass: process.env.NODE_ENV === 'development'
    ? 'prefetched'
    : undefined,
})

defineNuxtLink({
  componentName?: string;
  externalRelAttribute?: string;
  activeClass?: string;
  exactActiveClass?: string;
  prefetchedClass?: string;
  trailingSlash?: 'append' | 'remove'
}) => Component

<NuxtLink to="/articles" prefetch>Articles</NuxtLink>

<NuxtLink to="/articles" :prefetch="false">Articles</NuxtLink>

<NuxtLink to="/articles" no-prefetch>Articles</NuxtLink>

<NuxtLink
    to="/articles"
    prefetched-class="prefetched"
>
    Articles
</NuxtLink>

<NuxtLink to="www.masteringnuxt.com" external>
  Mastering Nuxt 3!
</NuxtLink>

<!-- 使用a标签 -->
<a href="www.masteringnuxt.com" rel="noopener noreferrer">Mastering Nuxt 3</a>

<!-- 使用NuxtLink替代 -->
<NuxtLink to="www.masteringnuxt.com">Mastering Nuxt 3</NuxtLink>

<template>
  <div>
    <select v-model="selectedProject">
      <option v-for="project in projects" :value="project.id" :key="project.id">
        {{ project.name }}
      </option>
    </select>

    <div v-if="pending">Loading tracks…</div>
    <div v-else-if="error">{{ error.message }}</div>
    <div v-else>
      <ul>
        <li v-for="track in tracks" :key="track.id">{{ track.name }}</li>
      </ul>
    </div>
  </div>
</template>

const selectedProject = ref(1)
const projects = [
  { id: 1, name: 'Project A' },
  { id: 2, name: 'Project B' },
  { id: 3, name: 'Project C' },
]

const { data: tracks, pending, error } = useAsyncData(
  'tracks',
  () => fetch(`https://api.example.com/projects/${selectedProject.value}/tracks`)
)

const supabase = useSupabaseAuthClient()

const login = async () => {
  const { error } = await supabase.auth.signInWithOAuth({
    provider: 'github',
  })

  if (error)
    console.error(error)
    // 处理错误，例如向用户显示通知

}

<template>
  <div>
    <h1>Available Instruments</h1>
    <ul v-if="!pending && !error">
      <li v-for="instrument in instruments" :key="instrument.id">
        {{ instrument.name }}
      </li>
    </ul>
    <p v-if="pending">Loading…</p>
    <p v-if="error">Error: {{ error.message }}</p>
  </div>
</template>

const { data: instruments, pending, error } = useAsyncData(
  'instruments',
  () => fetch('https://api.example.com/instruments')
)

<template>
  <div>
    <h1>Project Tracks</h1>
    <ul v-if="!pending && !error">
      <li v-for="track in tracks" :key="track.id">
        {{ track.name }}
      </li>
    </ul>
    <p v-if="pending">Loading…</p>
    <p v-if="error">Error: {{ error.message }}</p>
  </div>
</template>

const projectId = 1
const { data: tracks, pending, error } = useFetch(
  `https://api.example.com/projects/${projectId}/tracks`
)

const projectId = ref(1)
const { data: tracks, pending, error } = useFetch(
  () => `https://api.example.com/projects/${projectId.value}/tracks`
)

import vsharp from 'vite-plugin-vsharp'

export default defineNuxtConfig({
  // 👇 添加 vsharp 到 vite 插件
  vite: {
    plugins: [vsharp()],
  },

  // Nuxt 配置的其余部分
  runtimeConfig: {
    // …
  },
  modules: [
    // …
  ],
})

// ~/composables/useFetchWithCache.ts

import { StorageSerializers } from '@vueuse/core';

export default async <T>(url: string) => {
  // Use sessionStorage to cache data
  const cached = useSessionStorage<T>(url, null, {
    serializer: StorageSerializers.object,
  });

  if (!cached.value) {
    const { data, error } = await useFetch<T>(url);

    if (error.value) {
      throw createError({
        …error.value,
        statusMessage: `Could not fetch data from ${url}`,
      });
    }

    // 更新缓存
    cached.value = data.value as T;
  } else {
    console.log(`Getting value from cache for ${url}`);
  }

  return cached;
};

// 获取所有用户
const user = useFetchWithCache<User[]>('/api/users') 

// 或者是读取设置
const settings = useFetchWithCache<Settings>('/api/settings')

<NuxtLink
    to="/articles"
  target="_blank"
>
    Mastering Nuxt 3
</NuxtLink>

export default defineNuxtConfig({
  runtimeConfig: {
    // 仅在服务器端可用的私钥
    shoeStoreApiSecret: 'my-secret-key',
    // 公共密钥也在客户端公开
    public: {
      shoeStoreApiBase: '/shoe-api'
    }
  }
})

<script setup lang="ts">
const { shoeStoreApiBase } = useRuntimeConfig();
console.log(shoeStoreApiBase); // /shoe-api
</script>

<script setup lang="ts">
const { shoeStoreApiSecret } = useRuntimeConfig();
console.log(shoeStoreApiSecret); // undefined
</script>

export default defineEventHandler(async (event) => {
  const { shoreStoreApiSecret } = useRuntimeConfig()
  console.log(shoeStoreApiSecret) // my-secret-key
})

NUXT_PUBLIC_SHOE_STORE_API_BASE_URL = "https://api.shoestore.com"
NUXT_SHOE_STORE_API_SECRET = "my-secret-key"

// app.config.ts

export default defineAppConfig({
  theme: {
    primaryColor: '#ababab'
  }
})

<script setup lang="ts">
const appConfig = useAppConfig()
</script>

// index.d.ts
declare module 'nuxt/schema' {
  interface AppConfig {
    // 这将完全取代现有的推断“主题”属性
    theme: {
      // 您可能希望键入此值以添加比Nuxt推断的更具体的类型,
      // 例如字符串文字类型
      primaryColor?: 'red' | 'blue'
    }
  }
}