@vuesion/nuxt-vanilla-extract
Add seek-oss/vanilla-extract to your nuxt application
Setup
- Add
@vuesion/nuxt-vanilla-extractdependency to your project
yarn add @vuesion/nuxt-vanilla-extract # or npm install @vuesion/nuxt-vanilla-extract- Add
@vuesion/nuxt-vanilla-extractto themodulessection ofnuxt.config.js
{
modules: [
'@vuesion/nuxt-vanilla-extract',
]
}- Create
*.css.tsfile
import { style } from '@vanilla-extract/css'
export const className = style({
color: 'red',
fontFamily: 'sans-serif',
fontWeight: 600,
})- Import and use
*.css.tsfile
<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
- Clone this repository
- Install dependencies using
yarn installornpm install - Start development server using
npm run dev
License
Copyright (c) Johannes Werner