Repository: element-plus/element-plus-nuxt-starter
Branch: main
Commit: 6ecb01e7a0ba
Files: 41
Total size: 20.4 KB

Directory structure:
gitextract_9c3dgak6/

├── .github/
│   └── workflows/
│       ├── ci.yml
│       └── gh-pages.yml
├── .gitignore
├── .npmrc
├── .vscode/
│   └── settings.json
├── Dockerfile
├── LICENSE
├── README.md
├── app/
│   ├── app.vue
│   ├── assets/
│   │   └── scss/
│   │       ├── element/
│   │       │   ├── dark.scss
│   │       │   └── index.scss
│   │       └── index.scss
│   ├── components/
│   │   ├── DarkToggle.vue
│   │   ├── GitHubLink.vue
│   │   ├── NuxtLogo.vue
│   │   ├── RightTopMenu.vue
│   │   ├── TheCounter.vue
│   │   ├── TheExamples.vue
│   │   ├── TheLogos.vue
│   │   └── example/
│   │       ├── Buttons.vue
│   │       ├── DatePickers.vue
│   │       ├── Icons.vue
│   │       ├── Switches.vue
│   │       └── Tags.vue
│   ├── composables/
│   │   └── count.ts
│   ├── constants/
│   │   └── index.ts
│   ├── layouts/
│   │   ├── README.md
│   │   ├── default.vue
│   │   └── home.vue
│   ├── pages/
│   │   ├── [...all].vue
│   │   ├── hi/
│   │   │   └── [id].vue
│   │   └── index.vue
│   └── stores/
│       └── user.ts
├── eslint.config.mjs
├── nuxt.config.ts
├── package.json
├── public/
│   └── CNAME
├── server/
│   ├── api/
│   │   └── pageview.ts
│   └── tsconfig.json
├── tsconfig.json
└── uno.config.ts

================================================
FILE CONTENTS
================================================

================================================
FILE: .github/workflows/ci.yml
================================================
name: CI

on:
  push:
    branches:
      - main

  pull_request:
    branches:
      - main

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
      - uses: actions/setup-node@v4
        with:
          node-version: lts/*
          cache: pnpm

      - name: Install
        run: pnpm install

      - name: Lint
        run: pnpm run lint

  typecheck:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: pnpm/action-setup@v4
      - uses: actions/setup-node@v4
        with:
          node-version: lts/*
          cache: pnpm

      - name: Install
        run: pnpm install

      - name: Typecheck
        run: pnpm run typecheck


================================================
FILE: .github/workflows/gh-pages.yml
================================================
name: GitHub Pages

on:
  push:
    branches:
      - main
  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4

      - name: Install Dependencies
        uses: pnpm/action-setup@v4
        with:
          run_install: true

      - name: Setup Node
        uses: actions/setup-node@v4
        with:
          node-version: lts/*

      - name: Build
        run: npm run generate

      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          path: ./dist

  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    needs: build
    steps:
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4


================================================
FILE: .gitignore
================================================
node_modules
*.log
dist
.output
.nuxt
.vercel


================================================
FILE: .npmrc
================================================
shamefully-hoist=true
strict-peer-dependencies=false
shell-emulator=true
# fix code ERESOLVE \n ERESOLVE could not resolve
legacy-peer-deps=true

================================================
FILE: .vscode/settings.json
================================================
{
  "eslint.useFlatConfig": true,

  // Auto fix
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit",
    "source.organizeImports": "never"
  },
  "typescript.tsdk": "node_modules/typescript/lib"
}


================================================
FILE: Dockerfile
================================================
FROM node:20-alpine as build-stage

WORKDIR /app
RUN corepack enable

COPY .npmrc package.json pnpm-lock.yaml ./
RUN --mount=type=cache,id=pnpm-store,target=/root/.pnpm-store \
    pnpm install --frozen-lockfile

COPY . .
RUN pnpm build

# SSR
FROM node:20-alpine as production-stage

WORKDIR /app

COPY --from=build-stage /app/.output ./.output

EXPOSE 3000

CMD ["node", ".output/server/index.mjs"]


================================================
FILE: LICENSE
================================================
MIT License

Copyright (c) 2021 Element Plus

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.


================================================
FILE: README.md
================================================
# Element Plus with Nuxt 3 Minimal Starter

- SSR Preview: <https://element-plus-nuxt.vercel.app/>
- SSG Preview: <https://nuxt-starter.element-plus.org/>

We recommend to look at the [Nuxt 3 Docs](https://nuxt.com/) and [Element Plus Docs](https://element-plus.org/).

> If you are looking for a Vite + Vue + Element Plus starter, check out [element-plus-vite-starter](https://github.com/element-plus/element-plus-vite-starter/).

## Setup

Make sure to install the dependencies

```bash
pnpm install
```

## Development

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

```bash
pnpm dev
```

More info about [nuxt deployment](https://nuxt.com/docs/getting-started/deployment#presets).

Run `npm run generate` to generate static html in `.output/public`.

## Production

Build the application for production:

```bash
pnpm build
```

Checkout the [deployment documentation](https://nuxt.com/docs/getting-started/deployment).

## Deploy

You need set `NITRO_PRESET=vercel-edge`, see [Nuxt on Vercel](https://vercel.com/docs/frameworks/nuxt#edge-functions).

## Ref

- [vitesse-nuxt3](https://github.com/antfu/vitesse-nuxt3)


================================================
FILE: app/app.vue
================================================
<script setup lang="ts">
import { appName } from '~/constants'

useHead({
  title: appName,
})
</script>
<template>
  <NuxtLayout>
    <NuxtPage />
  </NuxtLayout>
</template>


================================================
FILE: app/assets/scss/element/dark.scss
================================================
@forward 'element-plus/theme-chalk/src/dark/var.scss' with (
  $bg-color: (
    'page': #0a0a0a,
    'overlay': #1d1e1f,
  )
);


================================================
FILE: app/assets/scss/element/index.scss
================================================
$-colors: (
  'primary': (
    'base': rgba(107,33,168, 1),
  ),
  'success': (
    'base': green,
  ),
  'warning': (
    'base': #f9a23c,
  ),
  'danger': (
    'base': #ff3300,
  ),
  'error': (
    'base': #f56c6c,
  ),
  'info': (
    'base': #909399,
  ),
);

@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: $-colors
);

@use './dark.scss';


================================================
FILE: app/assets/scss/index.scss
================================================
html,
body,
#app {
  margin: 0;
  padding: 0;
}

html.dark {
  background: #222;
  color: white;
}

a {
  font-weight: 400;
  color: var(--el-color-primary);
}


================================================
FILE: app/components/DarkToggle.vue
================================================
<script setup lang="ts">
const color = useColorMode()

useHead({
  meta: [{
    id: 'theme-color',
    name: 'theme-color',
    content: () => color.value === 'dark' ? '#222222' : '#ffffff',
  }],
})

function toggleDark() {
  color.preference = color.value === 'dark' ? 'light' : 'dark'
}
</script>

<template>
  <button class="inline-flex justify-center items-center" @click="toggleDark">
    <div class="i-ri-sun-line dark:i-ri-moon-line" />
  </button>
</template>


================================================
FILE: app/components/GitHubLink.vue
================================================
<script setup lang="ts">
import { repository } from "~/../package.json";
</script>

<template>
  <a class="inline-flex justify-center items-center dark:text-white" :href="repository.url" target="_blank">
    <div i-ri-github-line />
  </a>
</template>


================================================
FILE: app/components/NuxtLogo.vue
================================================
<template>
  <svg
    viewBox="0 0 221 65"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    class="h-8"
  >
    <g clip-path="url(#a)">
      <path
        fill="currentColor"
        d="M82.5623 18.5705h7.3017l15.474 24.7415V18.5705h6.741v35.0576h-7.252L89.3025 28.938v24.6901h-6.7402V18.5705ZM142.207 53.628h-6.282v-3.916c-1.429 2.7559-4.339 4.3076-8.015 4.3076-5.822 0-9.603-4.1069-9.603-10.0175V28.3847h6.282v14.3251c0 3.4558 2.146 5.8592 5.362 5.8592 3.524 0 5.974-2.7044 5.974-6.4099V28.3847h6.282V53.628ZM164.064 53.2289l-6.026-8.4144-6.027 8.4144h-6.69l9.296-13.1723-8.58-12.0709h6.843l5.158 7.2641 5.106-7.2641h6.895l-8.632 12.0709 9.295 13.1723h-6.638ZM183.469 20.7726v7.6116h7.149v5.1593h-7.149v12.5311c0 .4208.17.8245.473 1.1223.303.2978.715.4654 1.144.4661h5.532v5.9547h-4.137c-5.617 0-9.293-3.2062-9.293-8.8109V33.5484h-5.056v-5.1642h3.172c1.479 0 2.34-.8639 2.34-2.2932v-5.3184h5.825Z"
      />
      <path
        fill-rule="evenodd"
        clip-rule="evenodd"
        d="M30.1185 11.5456c-1.8853-3.24168-6.5987-3.24169-8.484 0L1.08737 46.8747c-1.885324 3.2417.47133 7.2938 4.24199 7.2938H21.3695c-1.6112-1.4081-2.2079-3.8441-.9886-5.9341l15.5615-26.675-5.8239-10.0138Z"
        fill="#80EEC0"
      />
      <path
        d="M43.1374 19.2952c1.5603-2.6523 5.461-2.6523 7.0212 0l17.0045 28.9057c1.5603 2.6522-.39 5.9676-3.5106 5.9676h-34.009c-3.1206 0-5.0709-3.3154-3.5106-5.9676l17.0045-28.9057ZM209.174 53.8005H198.483c0-1.8514.067-3.4526 0-6.0213h10.641c1.868 0 3.353.1001 4.354-.934 1-1.0341 1.501-2.3351 1.501-3.9029 0-1.8347-.667-3.2191-2.002-4.1532-1.301-.9674-2.985-1.4511-5.054-1.4511h-2.601v-5.2539h2.652c1.701 0 3.119-.4003 4.253-1.2009 1.134-.8006 1.701-1.9849 1.701-3.5527 0-1.301-.434-2.3351-1.301-3.1023-.834-.8007-2.001-1.201-3.503-1.201-1.634 0-2.918.4837-3.853 1.4511-.9.9674-1.401 2.1517-1.501 3.5527h-6.254c.133-3.2358 1.251-5.7877 3.352-7.6558 2.135-1.868 4.887-2.8021 8.256-2.8021 2.402 0 4.42.4337 6.055 1.301 1.668.834 2.919 1.9515 3.753 3.3525.867 1.4011 1.301 2.9523 1.301 4.6536 0 1.9681-.551 3.636-1.651 5.0037-1.068 1.3344-2.402 2.235-4.004 2.7021 1.969.4003 3.57 1.3677 4.804 2.9022 1.234 1.5011 1.852 3.4025 1.852 5.7043 0 1.9347-.468 3.7028-1.402 5.304-.934 1.6012-2.301 2.8855-4.103 3.8529-1.768.9674-3.953 1.4511-6.555 1.4511Z"
        fill="#00DC82"
      />
    </g>
    <defs>
      <clipPath id="a"><path fill="#fff" d="M0 0h221v65H0z"/></clipPath>
    </defs>
  </svg>
</template>


================================================
FILE: app/components/RightTopMenu.vue
================================================
<template>
  <div class="flex justify-center items-center gap-4 text-base">
    <DarkToggle />
    <GitHubLink />
  </div>
</template>


================================================
FILE: app/components/TheCounter.vue
================================================
<script setup lang="ts">
const { count } = useCount();
</script>

<template>
  <el-input-number v-model="count" :min="1" :max="10" />
</template>


================================================
FILE: app/components/TheExamples.vue
================================================
<script setup lang="ts">

const hello = () => ElMessage.info("hello world");
const helloSuccess = () => ElMessage.success("hello world");

const color = useColorMode();
const colorMode = computed({
  get: () => color.value === 'dark',
  set: () => (color.preference = (color.value === 'dark' ? 'light' : 'dark')),
});
</script>

<template>
  <ClientOnly>
    <el-switch v-model="colorMode" inline-prompt active-text="dark" inactive-text="light" size="large"/>
  </ClientOnly>

  <br >

  <el-dropdown class="m-4" type="primary">
    <el-button type="primary">
      Dropdown List
      <el-icon class="el-icon--right">
        <el-icon-arrow-down />
      </el-icon>
    </el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>Action 1</el-dropdown-item>
        <el-dropdown-item>Action 2</el-dropdown-item>
        <el-dropdown-item>Action 3</el-dropdown-item>
        <el-dropdown-item>Action 4</el-dropdown-item>
        <el-dropdown-item>Action 5</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>

  <br >

  <el-button :icon="ElIconView" class="m-4" @click="hello">Hello</el-button>
  <el-button class="m-4" type="primary" @click="hello">Hello</el-button>
  <el-button class="m-4" type="success" @click="helloSuccess">Hello</el-button>

  <br >

  <TheCounter class="m-4" />

  <div class="flex flex-col gap-2 items-center justify-center">
    <ExampleDatePickers />
    <ExampleIcons />
    <ExampleButtons />
    <ExampleSwitches />
    <ExampleTags />
  </div>
</template>


================================================
FILE: app/components/TheLogos.vue
================================================
<script setup lang="ts">
</script>

<template>
  <div class="display-logo" flex="~" gap-2 items-center>
    <img
      class="logo"
      src="https://element-plus.org/images/element-plus-logo.svg"
    >
    <el-icon><ElIconPlus /></el-icon>
    <NuxtLogo class="logo" />
  </div>
  <h2>
    <a target="_blank" href="https://element-plus.org/">Element Plus</a>
    With
    <a target="_blank" href="https://v3.nuxtjs.org/">NuxtJS</a>
  </h2>
</template>

<style>
.display-logo {
  display: flex;
  justify-content: center;
  align-items: center;
}

.logo {
  max-height: 3rem;
}
</style>


================================================
FILE: app/components/example/Buttons.vue
================================================
<script setup lang="ts">
const count = ref(0)
</script>

<template>
  <div class="my-2 flex flex-wrap items-center justify-center text-center">
    <el-button @click="count++">
      count is: {{ count }}
    </el-button>
    <el-button type="primary" @click="count++">
      count is: {{ count }}
    </el-button>
    <el-button type="success" @click="count++">
      count is: {{ count }}
    </el-button>
    <el-button type="warning" @click="count++">
      count is: {{ count }}
    </el-button>
    <el-button type="danger" @click="count++">
      count is: {{ count }}
    </el-button>
    <el-button type="info" @click="count++">
      count is: {{ count }}
    </el-button>
  </div>
</template>


================================================
FILE: app/components/example/DatePickers.vue
================================================

<script setup lang="ts">
import zhCn from "element-plus/es/locale/lang/zh-cn";

const timeValue = ref("");
</script>

<template>
  <el-config-provider :locale="zhCn">
    <el-date-picker
      v-model="timeValue"
      type="date"
      placeholder="请选择日期"
    />
  </el-config-provider>
</template>


================================================
FILE: app/components/example/Icons.vue
================================================
<template>
  <div class="pt-4 flex gap-2">
    <el-icon class="cursor-pointer">
      <el-icon-grape />
    </el-icon>
    <el-icon class="cursor-pointer">
      <ElIconIceCream />
    </el-icon>
    <el-icon class="cursor-pointer mb-4">
      <ElIconIceDrink />
    </el-icon>
  </div>
</template>


================================================
FILE: app/components/example/Switches.vue
================================================
<script setup lang="ts">
const value1 = ref(true)
</script>

<template>
  <div>
    <el-switch v-model="value1" />
    <el-switch
      v-model="value1"
      class="m-2"
      style="--ep-switch-on-color: black; --ep-switch-off-color: gray;"
    />
  </div>
</template>


================================================
FILE: app/components/example/Tags.vue
================================================
<template>
  <div>
    <el-tag type="success" class="m-1">
      Tag 1
    </el-tag>
    <el-tag type="warning" class="m-1">
      Tag 1
    </el-tag>
    <el-tag type="danger" class="m-1">
      Tag 1
    </el-tag>
    <el-tag type="info" class="m-1">
      Tag 1
    </el-tag>
  </div>
</template>


================================================
FILE: app/composables/count.ts
================================================
export function useCount() {
  const count = useState('count', () => Math.round(Math.random() * 20))

  function inc() {
    count.value += 1
  }
  function dec() {
    count.value -= 1
  }

  return {
    count,
    inc,
    dec,
  }
}


================================================
FILE: app/constants/index.ts
================================================
export const appName = 'Element Plus Nuxt Starter'
export const appDescription = 'Nuxt Starter for Element Plus'


================================================
FILE: app/layouts/README.md
================================================
## Layouts

Vue components in this dir are used as layouts.

By default, `default.vue` will be used unless an alternative is specified in the route meta.

```vue
<script setup lang="ts">
definePageMeta({
  layout: 'home',
})
</script>
```

Learn more on https://nuxt.com/docs/guide/directory-structure/layouts


================================================
FILE: app/layouts/default.vue
================================================
<template>
  <main class="px-10 py-20 text-center">
    <RightTopMenu class="absolute top-4 right-4" />

    <slot />
    <div class="mx-auto mt-5 text-center text-sm opacity-25">
      [Default Layout]
    </div>
  </main>
</template>


================================================
FILE: app/layouts/home.vue
================================================
<template>
  <main class="px-10 py-20 text-center">
    <RightTopMenu class="absolute top-4 right-4" />

    <slot />
    <div class="mx-auto mt-5 text-center text-sm opacity-25">
      [Home Layout]
    </div>
  </main>
</template>


================================================
FILE: app/pages/[...all].vue
================================================
<script setup lang="ts">
const router = useRouter()
</script>

<template>
  <main p="x4 y10" text="center teal-700 dark:gray-200">
    <div text-4xl>
      <div i-ep-warning inline-block />
    </div>
    <div>Not found</div>
    <div>
      <button text-sm btn m="3 t8" @click="router.back()">
        Back
      </button>
    </div>
  </main>
</template>


================================================
FILE: app/pages/hi/[id].vue
================================================
<script setup lang="ts">
const route = useRoute()
const user = useUserStore()
const name = (route.params as { id: string}).id

watchEffect(() => {
  user.setNewName((route.params as { id: string}).id)
})
</script>

<template>
  <div m-3>
    <h3>Hi, {{ name }}!</h3>

    <template v-if="user.otherNames.length">
      <span>Also as known as:</span>
      <ul>
        <li v-for="otherName in user.otherNames" :key="otherName">
          <router-link :to="`/hi/${otherName}`" replace>
            {{ otherName }}
          </router-link>
        </li>
      </ul>
    </template>

    <TheCounter />

    <div>
      <NuxtLink to="/">Back</NuxtLink>
    </div>
  </div>
</template>


================================================
FILE: app/pages/index.vue
================================================
<script setup lang="ts">
definePageMeta({
  layout: 'home',
})
</script>

<template>
  <div class="page-index">
    <TheLogos />
    <TheExamples />
  </div>
</template>

<style>
.page-index {
  padding-top: 60px;
  text-align: center;
}
</style>


================================================
FILE: app/stores/user.ts
================================================
import { acceptHMRUpdate, defineStore } from "pinia";

export const useUserStore = defineStore("user", () => {
  /**
   * Current named of the user.
   */
  const savedName = ref("");
  const previousNames = ref(new Set<string>());

  const usedNames = computed(() => Array.from(previousNames.value));
  const otherNames = computed(() =>
    usedNames.value.filter((name) => name !== savedName.value)
  );

  /**
   * Changes the current name of the user and saves the one that was used
   * before.
   *
   * @param name - new name to set
   */
  function setNewName(name: string) {
    if (savedName.value) previousNames.value.add(savedName.value);

    savedName.value = name;
  }

  return {
    setNewName,
    otherNames,
    savedName,
  };
});

if (import.meta.hot)
  import.meta.hot.accept(acceptHMRUpdate(useUserStore, import.meta.hot));


================================================
FILE: eslint.config.mjs
================================================
import withNuxt from './.nuxt/eslint.config.mjs'

// https://eslint.nuxt.com/packages/module
export default withNuxt(
  {
    rules: {
      'vue/multi-word-component-names': 'off',
    }
  }
  // your custom flat configs go here, for example:
  // {
  //   files: ['**/*.ts', '**/*.tsx'],
  //   rules: {
  //     'no-console': 'off' // allow console.log in TypeScript files
  //   }
  // },
  // {
  //   ...
  // }
)


================================================
FILE: nuxt.config.ts
================================================
// https://v3.nuxtjs.org/docs/directory-structure/nuxt.config
export default defineNuxtConfig({
  modules: [
    '@nuxt/eslint',
    '@vueuse/nuxt',
    '@unocss/nuxt',
    '@pinia/nuxt',
    '@element-plus/nuxt',
    '@nuxtjs/color-mode'
  ],

  devtools: {
    enabled: true,
  },

  app: {
    // head
    head: {
      title: 'Element Plus + Nuxt 3',
      meta: [
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        {
          name: 'description',
          content: 'ElementPlus + Nuxt3',
        },
      ],
      link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
    }
  },

  // css
  css: [
    '@unocss/reset/tailwind.css',
    '~/assets/scss/index.scss'
  ],

  // vueuse
  vueuse: {
    ssrHandlers: true,
  },

  // colorMode
  colorMode: {
    classSuffix: '',
  },

  future: {
    compatibilityVersion: 4,
  },

  experimental: {
    // when using generate, payload js assets included in sw precache manifest
    // but missing on offline, disabling extraction it until fixed
    payloadExtraction: false,
    renderJsonPayloads: true,
    typedPages: true,
  },

  compatibilityDate: '2024-08-14',

  nitro: {
    esbuild: {
      options: {
        target: 'esnext',
      },
    },
    prerender: {
      crawlLinks: false,
      routes: ['/'],
      ignore: ['/hi'],
    },
  },

  vite: {
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@use "@/assets/scss/element/index.scss" as element;`,
        },
      },
    },
  },

  elementPlus: {
    icon: 'ElIcon',
    importStyle: 'scss',
    themes: ['dark'],
  },
})


================================================
FILE: package.json
================================================
{
  "name": "element-plus-nuxt-starter",
  "type": "module",
  "private": true,
  "packageManager": "pnpm@10.14.0",
  "version": "0.1.0",
  "description": "Element Plus with Nuxt 3 Minimal Starter",
  "repository": {
    "type": "git",
    "url": "https://github.com/element-plus/element-plus-nuxt-starter"
  },
  "author": "Element Plus Team",
  "license": "MIT",
  "scripts": {
    "preinstall": "npx only-allow pnpm",
    "dev": "nuxi dev",
    "build": "nuxi build",
    "lint": "eslint .",
    "lint:fix": "eslint . --fix",
    "preview": "nuxi preview",
    "start": "node .output/server/index.mjs",
    "generate": "nuxi generate",
    "prepare": "nuxi prepare",
    "typecheck": "vue-tsc --noEmit"
  },
  "dependencies": {
    "@element-plus/icons-vue": "^2.3.1",
    "element-plus": "^2.10.5"
  },
  "devDependencies": {
    "@element-plus/nuxt": "^1.1.4",
    "@iconify-json/ri": "^1.2.5",
    "@nuxt/eslint": "^1.7.1",
    "@nuxtjs/color-mode": "^3.5.2",
    "@pinia/nuxt": "^0.11.2",
    "@unocss/nuxt": "^66.4.0",
    "@vueuse/nuxt": "^13.6.0",
    "consola": "^3.4.2",
    "eslint": "^9.32.0",
    "nuxt": "^4.0.2",
    "sass": "^1.89.2",
    "typescript": "^5.9.2",
    "vue-tsc": "^3.0.5"
  },
  "peerDependencies": {
    "pinia": "^2.1.6"
  },
  "pnpm": {
    "peerDependencyRules": {
      "ignoreMissing": [
        "webpack",
        "vite",
        "vue"
      ]
    }
  }
}


================================================
FILE: public/CNAME
================================================
nuxt-starter.element-plus.org


================================================
FILE: server/api/pageview.ts
================================================
const startAt = Date.now()
let count = 0

export default defineEventHandler(() => ({
  pageview: count++,
  startAt,
}))


================================================
FILE: server/tsconfig.json
================================================
{
  "extends": "../.nuxt/tsconfig.server.json"
}


================================================
FILE: tsconfig.json
================================================
{
  // https://v3.nuxtjs.org/concepts/typescript
  "extends": "./.nuxt/tsconfig.json"
}


================================================
FILE: uno.config.ts
================================================
import {
  defineConfig,
  presetAttributify,
  presetIcons,
  presetTypography,
  presetUno,
  presetWebFonts,
  transformerDirectives,
  transformerVariantGroup,
} from 'unocss'

export default defineConfig({
  shortcuts: [
    ['btn', 'px-4 py-1 rounded inline-block bg-teal-600 text-white cursor-pointer hover:bg-teal-700 disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50'],
    ['icon-btn', 'inline-block cursor-pointer select-none opacity-75 transition duration-200 ease-in-out hover:opacity-100 hover:text-teal-600'],
  ],
  presets: [
    presetUno(),
    presetAttributify(),
    presetIcons({
      scale: 1.2,
    }),
    presetTypography(),
    presetWebFonts({
      fonts: {
        sans: 'DM Sans',
        serif: 'DM Serif Display',
        mono: 'DM Mono',
      },
    }),
  ],
  transformers: [
    transformerDirectives(),
    transformerVariantGroup(),
  ],
})