Vuetify: [Feature Request] Wrapping Vuetify components as web components

Created on 7 Sep 2018 · 8Comments · Source: vuetifyjs/vuetify

Problem to solve

Hello, this might be a completely undoable (and odd) request, but this might be a nice feature for making the framework even more usable. I would propose wrapping the whole framework (or just a few components) as web components. As right now (as the name of the framework of course implies), it is only usable using VueJS.

Vue is great of course, but the Typescript integration isn't mature enough. So I could imagine many bigger applications going for a framework like Angular, which is typed and object oriented by nature. But in Angular there is no framework that comes near the scope and quality of Vuetify.

Wrapping Vuetify components as web components would make these components usable in every framework, even without any framework.

Proposed solution

There is an officially supported Web Component Wrapper: https://github.com/vuejs/vue-web-component-wrapper. This could be used to wrap the components.

Framework feature maybe

Source

RobbinBaauw

👍33

Most helpful comment

@KaelWD, @johnleider would it be possible to consider adding web components support in the upcoming version 3? Web components are an important technology for many, according to State of JavaScript 2019 report, 31% of respondents use them, and they are officially supported in vue-cli with --target wc. We needed to include our app as a web component widget in a website (think microfrontends) and it was quite an unexpected disappointment that Vuetify does not support this.

mrts on 9 May 2020

👍11

All 8 comments

For the ones interested, I made some changes to the api-generator project. This generates a vueComp folder with all the vuetify components in the dist folder, upon running.

What then to do is to create a new vue project, copy the components to for example a vueComp folder, with at least those dependencies:

"dependencies": {
    "vue": "^2.5.17",
    "vuetify": "^1.0.19"
},
"devDependencies": {
    "@vue/cli-service": "^3.0.3",
    "vue-cli-plugin-vuetify": "^0.1.6",
    "vue-template-compiler": "^2.5.17"
}

Then you can compile this to a single js file using the following command:
node node_modules\@vue\cli-service\bin\vue-cli-service.js build --target wc --name vuetify vueComp/*.vue

Then you need to add the vuetify and vue js in your html (or however you wanna do it, at least make sure it's available). Looks something like this:

<!DOCTYPE html>
<html>
    <head>
        <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vuetify/dist/vuetify.js"></script>
        <script src="./dist/vuetify.js"></script>
    </head>
    <body>

        <vuetify-v-app>
            <vuetify-v-btn color="indigo" fab>Test</vuetify-v-btn>
        </vuetify-v-app> 

    </body>
</html>

Mind you I had to remove the variable types from the props, as vue web component wrapper gave an error when I used the null type (any in vue).

Edit: This is of course nowhere near a good solution, for me this is just a temporary one. Though using this HTML, it does actually work, which is great.

RobbinBaauw on 25 Sep 2018

Has anyone found a workaround for doing this?

nickeyvee on 24 Feb 2020

mrts on 9 May 2020

👍11

Has anyone found a workaround for doing this?

You can just use ordinary run-time integration via JavaScript

  ... other code ...
  <div id=app></div>
  <script src=/your-component/js/chunk-vendors.1234abc.js></script>
  <script src=/your-component/js/app.1234abc.js></script>
  ... other code ...

as a workaround (along with corresponding includes in the header).

mrts on 10 May 2020

No progress on this? Was excited to use VueJS as web component then found out Vuetify won't work...

Zyles on 27 Jun 2020

I would really like this as well. This would enable data scientist to build awesome looking data apps in Python using Panel. I've been experimenting with using the mwc web components. But they are not nearly as developed.

Checkout awesome-panel.org to see what I am trying to build from Python only.

For my use case I would just need something compiled and ready to use from unpkg or similar via a script tag.