https://github.com/dword-design/nuxt-linaria

Module to integrate Linaria with Nuxt.
https://github.com/dword-design/nuxt-linaria

css-framework css-in-js cssinjs linaria nuxt-module vue vuejs

Last synced: 19 days ago
JSON representation

Module to integrate Linaria with Nuxt.

• Host: GitHub
• URL: https://github.com/dword-design/nuxt-linaria
• Owner: dword-design
• License: other
• Created: 2020-02-26T00:44:54.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-05-01T09:58:52.000Z (7 months ago)
• Last Synced: 2024-05-02T21:31:18.337Z (7 months ago)
• Topics: css-framework, css-in-js, cssinjs, linaria, nuxt-module, vue, vuejs
• Language: JavaScript
• Homepage:
• Size: 2.34 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE.md

Awesome Lists containing this project

README

        

# nuxt-linaria

  


    

      

    

      

    

      

    

      

    


      

    

      

    

      

    

      

    



Module to integrate Linaria with Nuxt.

This is an attempt to make the wonderful [Linaria](https://github.com/callstack/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

```bash

# npm

$ npm install nuxt-linaria

# Yarn

$ yarn add nuxt-linaria

```

## Usage

Add the module to your Nuxt config:

```js

// nuxt.config.js

export default {

  modules: [

    'nuxt-linaria',

  ],

}

```

Usage with JSX:

```js

import { css } from 'linaria'

export default {

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

}

```

Usage within a template:

```html

  
Hello world


```

```js

import { css } from 'linaria'

export default {

  computed: {

    style: () => css\`background: red\`,

  },

}

```

You might also want to have a look at [styled-vue](https://github.com/egoist/styled-vue), which is built for Vue.

## Contribute

Are you missing something or want to contribute? Feel free to file an [issue](https://github.com/dword-design/nuxt-linaria/issues) or a [pull request](https://github.com/dword-design/nuxt-linaria/pulls)! ⚙️

## 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:



  

    

   If you want to send me a one time donation. The coffee is pretty good 😊.


  

    

   Also for one time donations if you like PayPal.


  

    

   Here you can support me regularly, which is great so I can steadily work on projects.



Thanks a lot for your support! ❤️

## See also

* [nuxt-mail](https://github.com/dword-design/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](https://github.com/dword-design/nuxt-route-meta): Adds Nuxt page data to route meta at build time.

* [nuxt-modernizr](https://github.com/dword-design/nuxt-modernizr): Adds a Modernizr build to your Nuxt.js app.

* [nuxt-mermaid-string](https://github.com/dword-design/nuxt-mermaid-string): Embed a Mermaid diagram in a Nuxt.js app by providing its diagram string.

* [nuxt-content-git](https://github.com/dword-design/nuxt-content-git): Adds a property to each @nuxt/content document containing the raw HTML body, rendered from markdown.

## License

[MIT License](https://opensource.org/licenses/MIT) © [Sebastian Landwehr](https://sebastianlandwehr.com)