vuesion / nuxt-vanilla-extract

Add seek-oss/vanilla-extract to your nuxt application

@vuesion/nuxt-vanilla-extract

Add seek-oss/vanilla-extract to your nuxt application

📖 Release Notes

Setup

1. Add @vuesion/nuxt-vanilla-extract dependency to your project

yarn add @vuesion/nuxt-vanilla-extract # or npm install @vuesion/nuxt-vanilla-extract

2. Add @vuesion/nuxt-vanilla-extract to the modules section of nuxt.config.js

{
  modules: [
    '@vuesion/nuxt-vanilla-extract',
  ]
}

3. Create *.css.ts file

import { style } from '@vanilla-extract/css'

export const className = style({
  color: 'red',
  fontFamily: 'sans-serif',
  fontWeight: 600,
})

4. Import and use *.css.ts file

<template>
  <div :class="className">Foo Bar</div>
</template>

<script lang="ts">
import { defineComponent } from '@vue/composition-api';
import { className } from './VueBadge.css';

export default defineComponent({
  name: 'MyComponent',
  setup() {
    return {
      className,
    };
  },
});
</script>

Development

1. Clone this repository
2. Install dependencies using yarn install or npm install
3. Start development server using npm run dev

License

MIT License

Copyright (c) Johannes Werner