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

linaria/src/babel/extract.js

Lines 99 to 109 in a1d1b5a

	const isImportingModule = value =>
	// If the value is an exact match, assume it imports the module
	value === source ||
	// Otherwise try to resolve both and check if they are the same file
	resolveFromFile(value) ===
	// eslint-disable-next-line no-nested-ternary
	(source === 'linaria'
	? require.resolve('../index')
	: source === 'linaria/react'
	? require.resolve('../react/')
	: resolveFromFile(source));

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.