feat: Added example for Nuxt3

examples/nuxt/.gitignore

@@ -0,0 +1,22 @@
+# Nuxt dev/build outputs
+.output
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env.*
+!.env.example

examples/nuxt/README.md

@@ -0,0 +1,46 @@
+# Nuxt 3 Vanilla Extract Example
+
+## Setup
+
+First at the top of the vanilla-extract repo.  
+Make sure to install the dependencies:
+
+```bash
+# pnpm
+pnpm install
+```
+
+Next at the top directory of the vanilla-extract repo we then need to build the bundles.
+```bash
+pnpm build
+```
+
+Next move to the nuxt example directory
+```bash
+cd examples/nuxt
+```
+
+## Development Server
+
+Start the development server on http://localhost:3000
+
+```bash
+pnpm dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# builds the site
+pnpm build
+# or pre-renders the site for static hosting
+pnpm generate
+```
+
+Locally preview production build:
+
+```bash
+pnpm preview
+```

examples/nuxt/app.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>
+    <NuxtLayout>
+      <NuxtPage />
+    </NuxtLayout>
+  </div>
+</template>

examples/nuxt/components/HelloWorld.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { externalStyle } from './HelloWorld.vue.css'
+</script>
+
+<template>
+  <h1 :class="externalStyle">using class binding</h1>
+  <span class="inlineStyle">using actual class</span>
+</template>
+
+<style scoped>
+.inlineStyle {
+  font-weight: bold;
+}
+</style>

examples/nuxt/components/HelloWorld.vue.css.ts

@@ -0,0 +1,5 @@
+import { style } from '@vanilla-extract/css'
+
+export const externalStyle = style({
+  color: 'red'
+})

examples/nuxt/nuxt.config.ts

@@ -0,0 +1,16 @@
+import { defineNuxtConfig } from 'nuxt/config'
+import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin'
+
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  telemetry: false,
+  vite: {
+    plugins: [
+      vanillaExtractPlugin({})
+    ],
+  },
+  // Note currently server side rendering seems to break hmr (hot module reloading) with Nuxt
+  // One workaround is to instead bundle the vue components into a seperate vite built library
+  // Or disable SSR while developing components
+  ssr: false,
+})

examples/nuxt/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "vanilla-extract-example-nuxt",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "devDependencies": {
+    "@nuxt/ui-templates": "^1.2.0",
+    "@vanilla-extract/css": "workspace:*",
+    "@vanilla-extract/vite-plugin": "workspace:*",
+    "nuxt": "^3.6.3",
+    "vue": "^3.3.4",
+    "vue-router": "^4.2.4"
+  }
+}

examples/nuxt/pages/index.tsx

@@ -0,0 +1,9 @@
+import HelloWorld from '../components/HelloWorld.vue'
+
+export default defineComponent(() => {
+  return () => (
+    <>
+      <HelloWorld />
+    </>
+  )
+})

examples/nuxt/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}