Adding something like a theme="" option would help to separate multiple themes for the same component

[bennyschudel]

<script lang="sass" theme="alpha">
   ...
</script>
<script lang="sass" theme="beta">
   ...
</script>

...
vue: {
  ...
  theme: 'alpha'
}

Or what is the right way to do this? Separate components sharing template and scripts?

[kazupon]

Thank you for your feedback!

Sorry, I could not understand use-case separate multiple themes.
Could you tell us more use-cases explanation please?

[zephraph]

@bennyschudel I thought you were trying to do what I want to do (separate site themes), but in this case it looks like you're just doing component themes.

There's a pretty simple way to achieve this affect with how vue-loader currently works or with base vue.

See this example: https://jsfiddle.net/rtutc9kh/.

This example uses an attribute, but you could just as easily use a class. I use pug by default which makes it really easy to achieve this effect.

.MyComponent(:class="theme")
   stuffHere

@kazupon I believe that this can be closed as I feel it's probably not best suited to be handled by vue-loader.

[bennyschudel]

@zephraph Thank you very much for your response. However I'm looking for a solution to have multiple themes across many components. Passing always a theme attribute is not the best solution. Picking the right theme to multiple builds would be a better fit for me.

Of course I can share template and script via the src attribute but I like the concept of having everything in one file.

At the moment my workaround is to remove the unused theme via a postcss plugin. But having multiple themes in the same component would be a better option in my mind.

[bennyschudel]

@kazupon Thanks your your response. I'm looking for a way to build a component library which has more than one theme. Having everything together in one place is a big plus. That's the reason why I would like to being able to have multiple themes in the .vue file but compile it with a theme flag to pick the right theme for the output and drop the others.

[zephraph]

Ahhh. So your use case IS like mine, I gotcha. Sorry, when I saw the theme being specified in the vue block I just assumed it was more of a per component thing.

I'm actually working to solve this problem outside of vue-loader. I'm intending to create a webpack loader that sits in front of vue-loader. See the repo. It's still highly WIP and I'd love some help.

I feel like until it can be sorted out in a very reusable way it won't be suitable to be in vue-loader proper.

[blowsie]

You may want to think about what needs to be customised within your theme.

I created a simple architecture in nuxt which lets you theme your components, however is just a proof of concept and not a production ready piece of code.

I too am looking for assistance on how I can make themeable components.

In my example I have a themes folder which replicates exitsing structure and can provide overriding components for the given theme. Very powerful IMO espcially combined with mixins / extend to copy all the existing functions from the default components. Giving you the power to override HTML / JS / CSS as desired.

https://codesandbox.io/s/codesandbox-nuxt-kq5sy