# nuxt-test

**Repository Path**: rogax/nuxt-test

## Basic Information

- **Project Name**: nuxt-test
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-13
- **Last Updated**: 2026-01-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Nuxt Minimal Starter

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

## Setup

Make sure to install dependencies:

```bash
# npm
npm install

# pnpm
pnpm install

# yarn
yarn install

# bun
bun install
```

## Development Server

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

```bash
# npm
npm run dev

# pnpm
pnpm dev

# yarn
yarn dev

# bun
bun run dev
```

## Production

Build the application for production:

```bash
# npm
npm run build

# pnpm
pnpm build

# yarn
yarn build

# bun
bun run build
```

Locally preview production build:

```bash
# npm
npm run preview

# pnpm
pnpm preview

# yarn
yarn preview

# bun
bun run preview
```

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

## 加载 surely-table

在 Nuxt 项目里使用 `@surely-vue/table` 只需把它当成普通 Vue 3 插件引入即可；下面给出「npm 安装 + 自动导入」的完整步骤，复制即可跑通。

---

### 1. 安装依赖

```bash
npm i @surely-vue/table
```

---

### 2. 在 `nuxt.config.ts` 注册插件（自动导入，免手动 `use`)

```ts
export default defineNuxtConfig({
  modules: [
    // 如果用了 NuxtUI 可保持原来
  ],
  css: ['@surely-vue/table/dist/index.css'], // 引入样式
  build: {
    transpile: ['@surely-vue/table'],        // 避免 ssr 时报错
  },
})
```

---

### 3. 创建插件文件（可选，推荐，用于全局注册）

`plugins/surely-table.client.ts`

```ts
import { defineNuxtPlugin } from '#app'
import STable from '@surely-vue/table'
import '@surely-vue/table/dist/index.css'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use(STable)
})
```

> 加 `.client` 后缀可确保只在浏览器端加载，避免服务端虚拟 DOM 不匹配 。

---

### 4. 在页面/组件里直接使用

```vue
<template>
  <s-table
    :columns="columns"
    :data-source="dataSource"
    :scroll="{ y: 400 }"
    :pagination="false"
  />
</template>

<script setup lang="ts">
// 示例数据
const columns = [
  { title: 'Name', dataIndex: 'name' },
  { title: 'Age', dataIndex: 'age' },
]
const dataSource = ref(
  Array.from({ length: 1000 }, (_, i) => ({
    key: i,
    name: `Edward ${i}`,
    age: i + 1,
  }))
)
</script>
```