# nuxt3-desktop-template

**Repository Path**: LAMMUpro/nuxt3-desktop-template

## Basic Information

- **Project Name**: nuxt3-desktop-template
- **Description**: nuxt3 客户端模板
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2023-03-18
- **Last Updated**: 2024-11-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Nuxt 3 模板
> 不使用vuex, 因为ts不友好
> 不使用eslint, 因为耗时间
> /type.d.ts 全局
> /components/type.d.ts 组件

Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.

## Setup

Make sure to install the dependencies:

```bash
# yarn
yarn install

# npm
npm install

# pnpm
pnpm install
```

## Development Server

Start the development server on http://localhost:3000

```bash
npm run dev
```

## Production

Build the application for production:

```bash
npm run build
```

Locally preview production build:

```bash
npm run preview
```

Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.


## 页面中自定义头部
基本
```tsx
definePageMeta({
  title: "Some Page", // route.meta.title
  // middleware: ["auth"],
  // validate: async (route) => {
  //   // 如果不匹配会404
  //   return /^\d+$/.test(route.params.id as string);
  // },
});
/** 自定义meta */
const route = useRoute();
useHead({
  title: "My App",
  /** 在标题的基础上再处理 */
  titleTemplate: (title) => {
    return title ? `${title} - Site Title` : "Site Title";
  },
  meta: [
    { name: "description", content: `My amazing site.${route.meta.title}` },
  ],
  bodyAttrs: {
    class: "test",
  },
  link: [
    {
      rel: "stylesheet",
      href: "https://fonts.googleapis.com/css2?family=Roboto&display=swap",
      crossorigin: "",
    },
  ],
  script: [
    { innerHTML: "console.log('Hello world')" },
    {
      src: "https://third-party-script.com",
      tagPosition: "bodyClose" /** 'head' | 'bodyClose' | 'bodyOpen' */,
    },
  ],
});
```
seo相关
```tsx
useServerSeoMeta({
  title: "My Amazing Site",
  ogTitle: "My Amazing Site",
  description: () => "This is my amazing site, let me tell you all about it.",
  ogDescription: "This is my amazing site, let me tell you all about it.",
  ogImage: "https://example.com/image.png",
  twitterCard: "summary_large_image",
});
```