Vue support

[egoist]

Do you want to request a feature or report a bug? feature

What is the current behavior? There's only styled for React, I'm trying to work on a Vue.js integration but https://github.com/callstack/linaria/blob/a1d1b5a2f621ba50d986d97b96ff32f33e9a1106/src/babel/extract.js#L99-L109 makes it impossible

Solutions

1. somehow change the code above to allow importing styled from other modules like vue-linaria
2. or release built-in support for Vue at linaria/vue 😅

[eatsjobs]

Maybe you can just do something like that? data: { activeClass: csscolor: green;, errorClass: csscolor: red;` }

` I don't know if that works but should be. [https://vuejs.org/v2/guide/class-and-style.html#ad](https://vuejs.org/v2/guide/class-and-style.html#ad)

[egoist]

@eatsjobs sure we can do that, but I mean the styled component support.

[eatsjobs]

Yeah I understood. but I don't think it's in the 1.0 roadmap so I don't think you can have it soon

[egoist]

why though 😂 it isn't hard right? just allow the babel plugin to transform styled that's imported from other libs.

[zamotany]

@egoist We are happy to accept a PR with Vue support, we are fine with both integrating Vue inside linaria itself (linaria/vue) or changing the mentioned code. The third option is to add linaria/vue file which will require and export vue-linaria.

[vinicius73]

@egoist are you working on this?

[egoist]

@vinicius73 No but I made https://github.com/egoist/styled-vue which is pretty much linaria for Vue a while ago

[dword-design]

In case it's interesting for you, I had a Nuxt module lying around for some time integrating Linaria. I open-sourced it in case it's interesting for someone. It works for JSX, and you can pass the generated class to a Vue template, but it's not possible to directly call the css literal in the template.

Install it via npm install nuxt-linaria.

Then add it 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>

Let me know if this is helpful.