feat(vue): update nuxt template

components/vue/src/lib/create-style-context.tsx

@@ -1,6 +1,6 @@
+import { styled } from 'styled-system/jsx'
+import type { ElementType } from 'styled-system/types'
 import { type ComputedRef, computed, defineComponent, inject, provide } from 'vue'
-import { styled } from '../../styled-system/jsx'
-import type { ElementType } from '../../styled-system/types'
 
 type Props = Record<string, unknown>
 type Recipe = {

templates/vue/nuxt/.gitignore

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

templates/vue/nuxt/README.md

@@ -15,6 +15,9 @@ pnpm install
 
 # yarn
 yarn install
+
+# bun
+bun install
 ```
 
 ## Development Server
@@ -30,6 +33,9 @@ pnpm run dev
 
 # yarn
 yarn dev
+
+# bun
+bun run dev
 ```
 
 ## Production
@@ -45,6 +51,9 @@ pnpm run build
 
 # yarn
 yarn build
+
+# bun
+bun run build
 ```
 
 Locally preview production build:
@@ -58,6 +67,9 @@ pnpm run preview
 
 # yarn
 yarn preview
+
+# bun
+bun run preview
 ```
 
 Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

templates/vue/nuxt/app.vue

@@ -1,50 +1,10 @@
 <script setup lang="ts">
-import { Divider, HStack, Stack, styled } from 'styled-system/jsx'
-import { container } from 'styled-system/patterns'
-import { card } from 'styled-system/recipes'
-import { Button } from '~/components/ui/button'
-import { Input } from '~/components/ui/input'
-import { Label } from '~/components/ui/label'
-
-const { body, description, footer, header, root, title } = card()
-const Typography = styled('p')
+import { Button } from '~/components/ui'
 </script>
 
 <template>
-  <div :class="container({ py: '8', maxW: 'md' })">
-    <div :class="root">
-      <div :class="header">
-        <h2 :class="title">Sign Up</h2>
-        <p :class="description">
-          Create an account and discover the worlds' best UI component framework.
-        </p>
-      </div>
-      <div :class="body">
-        <Stack gap="4">
-          <Stack gap="3" direction="row">
-            <Button variant="outline" width="full">Google</Button>
-            <Button variant="outline" width="full">GitHub</Button>
-          </Stack>
-          <HStack gap="2">
-            <Divider />
-            <Typography color="fg.subtle" textStyle="sm" whiteSpace="nowrap">
-              or sign up with
-            </Typography>
-            <Divider />
-          </HStack>
-          <Stack gap="1.5">
-            <Label htmlFor="name">E-Mail</Label>
-            <Input id="name" placeholder="Your E-Mail" />
-          </Stack>
-          <Stack gap="1.5">
-            <Label htmlFor="password">Password</Label>
-            <Input id="password" type="password" placeholder="Your Password" />
-          </Stack>
-        </Stack>
-      </div>
-      <div :class="footer">
-        <Button width="full">Create Account</Button>
-      </div>
-    </div>
+  <div>
+    <NuxtRouteAnnouncer />
+    <Button>Park UI</Button>
   </div>
 </template>

templates/vue/nuxt/components/ui/index.ts

@@ -0,0 +1 @@
+export * from './primitives'

templates/vue/nuxt/components/ui/primitives/button.tsx

@@ -0,0 +1,6 @@
+import { styled } from 'styled-system/jsx'
+import { button } from 'styled-system/recipes'
+import type { ComponentProps } from 'styled-system/types'
+
+export type ButtonProps = ComponentProps<typeof Button>
+export const Button = styled('button', button)

templates/vue/nuxt/components/ui/primitives/index.ts

@@ -0,0 +1 @@
+export { Button, type ButtonProps } from './button'

templates/vue/nuxt/lib/create-style-context.tsx

@@ -0,0 +1,55 @@
+import { styled } from 'styled-system/jsx'
+import type { ElementType } from 'styled-system/types'
+import { type ComputedRef, computed, defineComponent, inject, provide } from 'vue'
+
+type Props = Record<string, unknown>
+type Recipe = {
+  (props?: Props): Props
+  splitVariantProps: (props: Props) => [Props, Props]
+}
+type Slot<R extends Recipe> = keyof ReturnType<R>
+type StyleContext<R extends Recipe> = Record<Slot<R>, string>
+
+export const createStyleContext = <R extends Recipe>(recipe: R) => {
+  const withProvider = <P,>(Component: ElementType, slot: Slot<R>) => {
+    const StyledComponent = styled(Component)
+
+    return defineComponent<P>({
+      setup(props, { slots }) {
+        const splittedProps = computed(() => {
+          return recipe.splitVariantProps(props)
+        })
+
+        const styles = computed(() => {
+          const [variantProps] = splittedProps.value
+          return recipe(variantProps) as StyleContext<R>
+        })
+
+        provide('styles', styles)
+        return () => (
+          <StyledComponent {...splittedProps.value[1]} class={styles.value[slot]}>
+            {slots.default?.()}
+          </StyledComponent>
+        )
+      },
+    })
+  }
+
+  const withContext = <P,>(Component: ElementType, slot: Slot<R>) => {
+    const StyledComponent = styled(Component)
+
+    return defineComponent<P>({
+      setup(props, { slots }) {
+        const slotStyles = inject<ComputedRef<StyleContext<R>>>('styles')
+
+        return () => (
+          <StyledComponent {...props} class={slotStyles?.value?.[slot]}>
+            {slots.default?.()}
+          </StyledComponent>
+        )
+      },
+    })
+  }
+
+  return { withProvider, withContext }
+}

templates/vue/nuxt/nuxt.config.ts

@@ -2,12 +2,12 @@ import { createResolver } from '@nuxt/kit'
 const { resolve } = createResolver(import.meta.url)
 
 export default defineNuxtConfig({
+  compatibilityDate: '2024-04-03',
+  devtools: { enabled: true },
   alias: {
     'styled-system': resolve('./styled-system'),
   },
-
   css: ['@/assets/css/global.css'],
-
   postcss: {
     plugins: {
       '@pandacss/dev/postcss': {},