Cockpit Plugin with Vue.js and Vuetify as frontend library

Community Community Extensions
1

Hey everyone,

I’m struggling on how to properly inject a javascript plugin writtten in vue+vuetify. I managed to embed the general vue structure, however, things are getting complicated when trying to involve vuetify as UI library for styling.

My plugin.js file looks as follows:

import Vue from "vue";
import App from "./App.vue";
import vuetify from './plugins/vuetify'

export default {
    id: "myPlugin",
    pluginPoint: "cockpit.dashboard",
    priority: 10,
    render: (node, { api }) => {
        const mainContent = document.createElement("div");
        node.appendChild(mainContent);
        new Vue({
            vuetify,
            render: (h) => h(App, {props: {apiData: api}}),
        }).$mount(mainContent);
    }
};

Particularly, I inject the vue-component App.vue, which looks as follows:

<template>
<v-app>
      <definition-list-comp :api=apiData />
</v-app>
</template>

<script>
import DefinitionListComp from "./components/DefinitionListComp.vue"

export default {
  name: 'App',
  props: ["apiData"],
  components: {
    DefinitionListComp
  }
}
</script>

The App.vue component refers to the DefinitionListComp.Vue component:

<template>
  <div>
    <p>{{api}}</p>
    <button>Plain HTML Button - Working</button>
    <v-btn>Vuetify Button - Not Working</v-btn>
  </div>
</template>

<script>
export default {
  name: "DefinitionListComp",
  props: ["api"],
};
</script>

This, in turn, gives me the following in Cockpit:

InkedNot Working_LI
InkedNot Working_LI1907×706 104 KB

As can be seen, the button styled with vuetify UI library is not correctly displayed. Instead, a vuetify button would look as follows when propery processed:

Inkedworking2_LI
Inkedworking2_LI1237×750 72.6 KB

What’s surpirsing is that in the former case the vuetify directives equal the html tags (see e.g. in DefinitionListComp.vue the vuetify directice v-btn to be the same as in the html output, highlighted in red in the first picture). However, in the second and “correct” case, the vuetify directives are translated into proper html tags (here, v-btn is translated into what is highlighted in red in the second picture).

Might this be a problem occuring during transpiling the .js files? I’m using rollup with the following setup:

// rollup.config.js
import babel from "@rollup/plugin-babel";
import resolve from "@rollup/plugin-node-resolve";
import commonjs from "@rollup/plugin-commonjs";
import replace from "@rollup/plugin-replace";
import vue from "rollup-plugin-vue2";
import vuetify from "rollup-plugin-vuetify"
import postcss from "rollup-plugin-postcss";

export default {
    input: "src/main.js",
    output: {
        file: "dist/bundle.js"
    },
    //inlineDynamicImports: true,
    plugins: [
        resolve(),
        babel({ "presets": ["@babel/preset-env"] }),
        commonjs({
            include: "node_modules/**"
        }),
        replace({
            "process.env.NODE_ENV": JSON.stringify("production")
        }),
        postcss(),
        vue({
            compileTemplate: true
        }),
        vuetify()
    ]
};

Did anyone of you guys run into similar problems?
Any kind of help would be greatly appreciated.
Many thanks in advance!

2