0.0.3 • Published 3 years ago

@vuesion/nuxt-vanilla-extract v0.0.3

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

@vuesion/nuxt-vanilla-extract

npm version npm downloads Github Actions CI License

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
  1. Add @vuesion/nuxt-vanilla-extract to the modules section of nuxt.config.js
{
  modules: [
    '@vuesion/nuxt-vanilla-extract',
  ]
}
  1. Create *.css.ts file
import { style } from '@vanilla-extract/css'

export const className = style({
  color: 'red',
  fontFamily: 'sans-serif',
  fontWeight: 600,
})
  1. 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