├── .npmrc
├── plugins
    └── uno.ts
├── .eslintrc
├── .eslintignore
├── .gitignore
├── pages
    ├── index.vue
    └── hi
    │   └── _id.vue
├── layouts
    └── default.vue
├── styles
    └── main.css
├── netlify.toml
├── composables
    └── count.ts
├── components
    ├── Footer.vue
    ├── DarkToggle.vue
    ├── Counter.vue
    ├── Logos.vue
    └── InputEntry.vue
├── tsconfig.json
├── package.json
├── nuxt.config.ts
├── static
    ├── nuxt.svg
    └── vite.svg
└── README.md


/.npmrc:
--------------------------------------------------------------------------------
1 | shamefully-hoist=true
2 | 


--------------------------------------------------------------------------------
/plugins/uno.ts:
--------------------------------------------------------------------------------
1 | import 'uno.css'
2 | 


--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "@antfu"
3 | }
4 | 


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | wp-dist
2 | dist
3 | node_modules
4 | assets
5 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .nuxt
3 | *.log
4 | dist
5 | wp-dist
6 | .output
7 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <div>
3 |     <Logos />
4 |     <InputEntry />
5 |   </div>
6 | </template>
7 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
1 | <template>
2 |   <main py-20 px-10 text-center>
3 |     <Nuxt />
4 |     <Footer />
5 |   </main>
6 | </template>
7 | 


--------------------------------------------------------------------------------
/styles/main.css:
--------------------------------------------------------------------------------
 1 | html,
 2 | body,
 3 | #app {
 4 |   height: 100vh;
 5 |   margin: 0;
 6 |   padding: 0;
 7 | }
 8 | 
 9 | html.dark {
10 |   background: #222;
11 |   color: white;
12 | }
13 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
 1 | [build.environment]
 2 |   NPM_FLAGS = "--prefix=/dev/null"
 3 |   NODE_VERSION = "14"
 4 | 
 5 | [build]
 6 |   publish = "dist"
 7 |   command = "npx pnpm i --store=node_modules/.pnpm-store && npx pnpm run build"
 8 | 
 9 | [[redirects]]
10 |   from = "/*"
11 |   to = "/index.html"
12 |   status = 200
13 | 


--------------------------------------------------------------------------------
/composables/count.ts:
--------------------------------------------------------------------------------
 1 | export function useCount() {
 2 |   const count = useState('count', () => Math.round(Math.random() * 20))
 3 | 
 4 |   function inc() {
 5 |     count.value += 1
 6 |   }
 7 |   function dec() {
 8 |     count.value -= 1
 9 |   }
10 | 
11 |   return {
12 |     count,
13 |     inc,
14 |     dec,
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/components/Footer.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div
 3 |     text="xl gray4"
 4 |     m-5
 5 |     flex
 6 |     justify-center
 7 |     gap-3
 8 |   >
 9 |     <NuxtLink i-carbon-campsite to="/" />
10 |     <a i-carbon-logo-github href="https://github.com/antfu/vitesse-nuxt" target="__blank" />
11 |     <DarkToggle />
12 |   </div>
13 | </template>
14 | 


--------------------------------------------------------------------------------
/components/DarkToggle.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang='ts'>
 2 | const isDark = useDark()
 3 | const toggleDark = useToggle(isDark)
 4 | </script>
 5 | 
 6 | <template>
 7 |   <button class="!outline-none" @click="toggleDark()">
 8 |     <div v-if="isDark" class="i-carbon-moon" />
 9 |     <div v-else class="i-carbon-sun" />
10 |   </button>
11 | </template>
12 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "./.nuxt/tsconfig.json",
 3 |   "compilerOptions": {
 4 |     "types": [
 5 |       "node",
 6 |       "unplugin-vue2-script-setup/types"
 7 |     ]
 8 |   },
 9 |   "vueCompilerOptions": {
10 |     "experimentalCompatMode": 2,
11 |     "experimentalTemplateCompilerOptions": {
12 |       "compatConfig": { "Mode": 2 } // optional
13 |     }
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/components/Counter.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const { count, inc, dec } = useCount()
 3 | </script>
 4 | 
 5 | <template>
 6 |   <div inline-flex m="y-3">
 7 |     <button btn p-2 rounded-full @click="dec()">
 8 |       <div i-carbon-subtract></div>
 9 |     </button>
10 |     <div font="mono" w="15" m-auto inline-block>
11 |       {{ count }}
12 |     </div>
13 |     <button btn p-2 rounded-full @click="inc()">
14 |       <div i-carbon-add></div>
15 |     </button>
16 |   </div>
17 | </template>
18 | 


--------------------------------------------------------------------------------
/pages/hi/_id.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const vm = getCurrentInstance()
 3 | const name = vm?.proxy.$route.params.id
 4 | </script>
 5 | 
 6 | <template>
 7 |   <div>
 8 |     <div i-twemoji:waving-hand text-4xl inline-block animate-bounce></div>
 9 |     <h3 text-2xl font-500>
10 |       Hi,
11 |     </h3>
12 |     <div text-xl>
13 |       {{ name }}!
14 |     </div>
15 | 
16 |     <Counter />
17 | 
18 |     <div>
19 |       <NuxtLink
20 |         class="btn m-3 text-sm"
21 |         to="/"
22 |       >
23 |         Back
24 |       </NuxtLink>
25 |     </div>
26 |   </div>
27 | </template>
28 | 


--------------------------------------------------------------------------------
/components/Logos.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div inline-flex text-xl font-300 cursor-default>
 3 |     <div flex flex-col children:mx-auto>
 4 |       <img w-18 h-18 inline-block src="/nuxt.svg" />
 5 |       <span text-green5>Nuxt Bridge</span>
 6 |     </div>
 7 |     <div
 8 |       text="3xl gray4"
 9 |       m="x-4 y-auto"
10 |       transition-all-500
11 |       transform
12 |       hover:rotate-135
13 |       i-carbon-add
14 |     />
15 |     <div flex flex-col children:mx-auto>
16 |       <img w-18 h-18 inline-block src="/vite.svg" />
17 |       <span text-purple5>Vitesse</span>
18 |     </div>
19 |   </div>
20 | </template>
21 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "private": true,
 3 |   "scripts": {
 4 |     "dev": "nuxi dev",
 5 |     "build": "nuxi generate",
 6 |     "start": "node .output/server/index.mjs"
 7 |   },
 8 |   "devDependencies": {
 9 |     "@antfu/eslint-config": "^0.16.1",
10 |     "@iconify/json": "^2.1.7",
11 |     "@nuxt/bridge-edge": "latest",
12 |     "@nuxt/kit-edge": "latest",
13 |     "@unocss/nuxt": "^0.26.3",
14 |     "@vue/runtime-dom": "^3.2.31",
15 |     "@vueuse/core": "^7.6.2",
16 |     "eslint": "^8.10.0",
17 |     "nuxi-edge": "latest",
18 |     "nuxt-edge": "latest",
19 |     "typescript": "4.5.5"
20 |   },
21 |   "pnpm": {
22 |     "overrides": {
23 |       "vue-demi": "0.12.0"
24 |     }
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/nuxt.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineNuxtConfig } from '@nuxt/bridge-edge'
 2 | 
 3 | export default defineNuxtConfig({
 4 |   buildModules: [
 5 |     '@unocss/nuxt',
 6 |     '@vueuse/core/nuxt',
 7 |     '@nuxt/bridge-edge',
 8 |   ],
 9 |   css: [
10 |     '@unocss/reset/tailwind.css',
11 |     '~/styles/main.css',
12 |   ],
13 |   target: 'static',
14 |   components: true,
15 |   bridge: {
16 |     vite: true,
17 |   },
18 |   unocss: {
19 |     shortcuts: [
20 |       ['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'],
21 |     ],
22 |     uno: true,
23 |     attributify: true,
24 |     icons: {
25 |       scale: 1.2,
26 |     },
27 |   },
28 | })
29 | 


--------------------------------------------------------------------------------
/components/InputEntry.vue:
--------------------------------------------------------------------------------
 1 | <script setup lang="ts">
 2 | const name = ref('')
 3 | </script>
 4 | 
 5 | <template>
 6 |   <form @submit.stop.prevent="$router.push(`/hi/${name}`)">
 7 |     <input
 8 |       id="name"
 9 |       v-model.trim="name"
10 |       placeholder="What's your name?"
11 |       type="text"
12 |       autocomplete="off"
13 |       spellcheck="false"
14 |       minlength="1"
15 |       required="required"
16 |       autofocus="autofocus"
17 |       p="x-4 y-2"
18 |       m="t-5"
19 |       w="250px"
20 |       text="center"
21 |       bg="transparent"
22 |       border="~ rounded gray-200 dark:gray-700"
23 |       outline="none active:none"
24 |     />
25 |     <button
26 |       type="submit"
27 |       class="block mx-auto my-3 text-sm btn"
28 |     >
29 |       GO
30 |     </button>
31 |   </form>
32 | </template>
33 | 


--------------------------------------------------------------------------------
/static/nuxt.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 400 400">
2 |   <g fill-rule="nonzero" transform="translate(0 50)" fill="none">
3 |     <path d="M227.92099 83.45116l-13.6889 24.10141-46.8148-82.44693L23.7037 278.17052h97.3037c0 13.31084 10.61252 24.10142 23.70371 24.10142H23.70371c-8.46771 0-16.29145-4.59601-20.5246-12.05272-4.23315-7.4567-4.23272-16.64312.00114-24.0994L146.89383 13.05492c4.23415-7.45738 12.0596-12.05138 20.5284-12.05138 8.46878 0 16.29423 4.594 20.52839 12.05138l39.97037 70.39623z" fill="#00C58E"/>
4 |     <path d="M331.6642 266.11981l-90.05432-158.56724-13.6889-24.10141-13.68888 24.10141-90.04445 158.56724c-4.23385 7.45629-4.23428 16.64271-.00113 24.09941 4.23314 7.4567 12.05689 12.05272 20.5246 12.05272h166.4c8.46946 0 16.29644-4.591 20.532-12.04837 4.23555-7.45736 4.23606-16.64592.00132-24.10376h.01976zM144.7111 278.17052L227.921 131.65399l83.19012 146.51653h-166.4z" fill="#2F495E"/>
5 |     <path d="M396.04938 290.22123c-4.23344 7.45557-12.05656 12.0507-20.52345 12.0507H311.1111c13.0912 0 23.7037-10.79057 23.7037-24.10141h40.66173L260.09877 74.98553l-18.4889 32.56704L227.921 83.45116l11.65432-20.51634c4.23416-7.45738 12.0596-12.05138 20.5284-12.05138 8.46879 0 16.29423 4.594 20.52839 12.05138l115.41728 203.185c4.23426 7.457 4.23426 16.6444 0 24.1014z" fill="#108775"/>
6 |   </g>
7 | </svg>
8 | 


--------------------------------------------------------------------------------
/static/vite.svg:
--------------------------------------------------------------------------------
 1 | <svg width="410" height="404" viewBox="0 0 410 404" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path d="M399.641 59.5246L215.643 388.545C211.844 395.338 202.084 395.378 198.228 388.618L10.5817 59.5563C6.38087 52.1896 12.6802 43.2665 21.0281 44.7586L205.223 77.6824C206.398 77.8924 207.601 77.8904 208.776 77.6763L389.119 44.8058C397.439 43.2894 403.768 52.1434 399.641 59.5246Z" fill="url(#paint0_linear)"/>
 3 | <path d="M292.965 1.5744L156.801 28.2552C154.563 28.6937 152.906 30.5903 152.771 32.8664L144.395 174.33C144.198 177.662 147.258 180.248 150.51 179.498L188.42 170.749C191.967 169.931 195.172 173.055 194.443 176.622L183.18 231.775C182.422 235.487 185.907 238.661 189.532 237.56L212.947 230.446C216.577 229.344 220.065 232.527 219.297 236.242L201.398 322.875C200.278 328.294 207.486 331.249 210.492 326.603L212.5 323.5L323.454 102.072C325.312 98.3645 322.108 94.137 318.036 94.9228L279.014 102.454C275.347 103.161 272.227 99.746 273.262 96.1583L298.731 7.86689C299.767 4.27314 296.636 0.855181 292.965 1.5744Z" fill="url(#paint1_linear)"/>
 4 | <defs>
 5 | <linearGradient id="paint0_linear" x1="6.00017" y1="32.9999" x2="235" y2="344" gradientUnits="userSpaceOnUse">
 6 | <stop stop-color="#41D1FF"/>
 7 | <stop offset="1" stop-color="#BD34FE"/>
 8 | </linearGradient>
 9 | <linearGradient id="paint1_linear" x1="194.651" y1="8.81818" x2="236.076" y2="292.989" gradientUnits="userSpaceOnUse">
10 | <stop stop-color="#FFEA83"/>
11 | <stop offset="0.0833333" stop-color="#FFDD35"/>
12 | <stop offset="1" stop-color="#FFA800"/>
13 | </linearGradient>
14 | </defs>
15 | </svg>
16 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Archived. Try the [Nuxt 3 version](https://github.com/antfu/vitesse-nuxt3) instead.
 2 | 
 3 | ----
 4 | 
 5 | <p align="center">
 6 | <img src="https://user-images.githubusercontent.com/11247099/109278332-6100e780-7853-11eb-9632-ce0b870017e0.png" width="500"/>
 7 | </p>
 8 | 
 9 | <h2 align="center">Vitesse Nuxt Bridge</h2>
10 | 
11 | <p align="center">
12 | <a href="https://github.com/antfu/vitesse">Vitesse</a> experience for Nuxt 2 and Vue 2.
13 | </p><br>
14 | 
15 | 
16 | ## Features
17 | 
18 | - [💚 Nuxt Bridge](https://v3.nuxtjs.org/getting-started/bridge) - Experience Nuxt 3 features on existing Nuxt 2 projects.
19 | 
20 | - ⚡️ Vite - Instant HMR
21 | 
22 | - 🎨 [UnoCSS](https://github.com/unocss/unocss) - The instant on-demand atomic CSS engine.
23 | 
24 | - 😃 Use icons from any icon sets in Pure CSS, powered by [UnoCSS](https://github.com/unocss/unocss)
25 | 
26 | - 🔥 Use the new `<script setup>` syntax in Vue 2
27 | 
28 | - 📥 APIs auto importing - use Composition API and others directly
29 | 
30 | - 🦾 TypeScript, of course
31 | 
32 | ## Plugins
33 | 
34 | ### Nuxt Modules
35 | 
36 | - [`@nuxt/bridge`](https://v3.nuxtjs.org/getting-started/bridge) - Experience Nuxt 3 features on existing Nuxt 2 projects.
37 | - [VueUse](https://github.com/antfu/vueuse) - collection of useful composition APIs
38 | - [UnoCSS](https://github.com/antfu/unocss) - on-demand atomic CSS engine - powers pure CSS Icons!
39 | 
40 | ## IDE Integration
41 | 
42 | We recommend using [VS Code](https://code.visualstudio.com/) with [Volar](https://github.com/johnsoncodehk/volar) to get the best experience (You might want to disable Vetur if you have it).
43 | 


--------------------------------------------------------------------------------