How to use LitElement in a Vue CLI 3 project

I'm a big fan of web components, I think they are awesome for many different reasons and they are basically what finally got me into liking web front-end development.

However, I'm not here to start another post on how web components are or aren't good, how they will or won't substitute 'X' framework, or anything like that, plenty other people who know more about those topics than me have already discussed that deeply.

I understand how frameworks can be great and how many people already use them successfully in production, but in my opinion the cool part about web components is that they can be used in any framework or with no framework at all, and I'm here to show you a couple of ways a framework (in this case Vue) can coexist with web components (in this case based on LitElement).

Using web components installed from npm

Web components installed from npm don't really need any extra configuration in Vue as long as you only need to support evergreen browsers, nice isn't it?

Now, I know the world isn't all nice and not everyone uses the latest browsers so for info on how to configure the polyfills I would recommend you read this post from Vaadin (by the way, they have a great web components collection).

The actual usage of the components in your Vue CLI 3 app would be something like this:

<template>
  ...
  <awesome-component 
    :attribute="attribute" 
    :property-only.prop="property"
    @an-event="callback"
    ref="awesomeReference"
  >
  </awesome-component>
  ...
</template>
<script>
import 'awesome-component';

export default {...};
</script>

Creating components based on LitElement in a Vue CLI 3 app

I don't really know why you would actually want to do that to be honest but the cool thing is that you just can do it, all you need to do is to add the following to the transpileDependencies property of your vue.config.js after installing LitElement:

module.exports = {
  transpileDependencies: [/node_modules(?:\/|\\)lit-element|lit-html/],
};

This is to explicitly transpile LitElement and lit-html as they only provide es modules exports (for more information check the Vue CLI docs).

And that's it, with that you can create LitElement components in your vue app to your heart's content (just remember, for the polyfills configuration check Vaadin's post out).

On that, if you're using any other base class for web components, this configuration will also be useful, just change the lit-element for your class of choice.

Conclusion

Sometimes as developers we can get so engrossed on proving our technology of choice is supreme that we may forget they can coexist with each other, this is just a reminder that there's no need to fight on whether web components are here to substitute frameworks or not, they're a standard web api that everyone can benefit from and I hope this post motivates more web developers to try them out.

Thank you for reading, this is my first post here at dev so please be nice 😄