nuxt-linaria

Module to integrate Linaria with Nuxt.

This is an attempt to make the wonderful Linaria CSS-in-JS framework available to Nuxt. It is possible to use it in JSX and you can also pass a generated class to a template, but you cannot directly use the css literal in templates because the linaria loader only parses JavaScript.

Install

# npm
$ npm install nuxt-linaria

# Yarn
$ yarn add nuxt-linaria

Usage

Add the module to your Nuxt config:

// nuxt.config.js

export default {
  modules: [
    'nuxt-linaria',
  ],
}

Usage with JSX:

<script>
import { css } from 'linaria'

export default {
  render: h => <div class={css`background: red`}>Hello world</div>,
}
</script>

Usage within a template:

<template>
  <div :class="style">Hello world</div>
</template>

<script>
import { css } from 'linaria'

export default {
  computed: {
    style: () => css\`background: red\`,
  },
}
</script>

You might also want to have a look at styled-vue, which is built for Vue.

Contribute

Are you missing something or want to contribute? Feel free to file an issue or a pull request! ⚙️

Support

Hey, I am Sebastian Landwehr, a freelance web developer, and I love developing web apps and open source packages. If you want to support me so that I can keep packages up to date and build more helpful tools, you can donate here:

Thanks a lot for your support! ❤️

See also

• nuxt-mail: Adds email sending capability to a Nuxt.js app. Adds a server route, an injected variable, and uses nodemailer to send emails.
• nuxt-route-meta: Adds Nuxt page data to route meta at build time.
• nuxt-modernizr: Adds a Modernizr build to your Nuxt.js app.
• nuxt-mermaid-string: Embed a Mermaid diagram in a Nuxt.js app by providing its diagram string.
• nuxt-content-git: Adds a property to each @nuxt/content document containing the raw HTML body, rendered from markdown.

License

MIT License © Sebastian Landwehr