How to generate a Web Component using nuxt and babel?

user_10139154 0
Viewed 1064

When i start building my nuxt js project, I write:

nuxt build or npm run build

The result of the excution is the dist folder that contains index.html

<html>

<head>
</head>

<body>
    <div id="__nuxt">
        <style>
        </style>
        <div class="sk-folding-cube">
            <div class="sk-cube1 sk-cube"></div>
            <div class="sk-cube3 sk-cube"></div>
        </div>
    </div>
    <script type="text/javascript" src="/_nuxt/d3be7369ce502214a6cb.js"></script>
   </body>
  </html>

I wonder if thier any method to generate a Web Component https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements for nuxt js project using babel or others methods ?.

I have only this resource in github of nuxt but it is old https://github.com/nuxt/nuxt.js/issues/2478

babeljs nuxt.js vue.js javascript
1 Answers

I'm doing my own research on the topic and am currently building a prototype with nuxt-custom-elements (https://github.com/GrabarzUndPartner/nuxt-custom-elements). You can configure the web component directly from your nuxt.config.js. When building the project, the configured components are then automatically generated and can either be extracted from the build folder or delivered later with nuxt directly on server-side.

user_38875230
Related