Is it possible to install third party plugins when using Vue 3?

[d-ryabtsev]

I have been playing around with the renderRootJsx function but I see no obvious way to get to the app instance or how to invoke one so that I could do app.use to install the plugin that I need. Can you help?

[elevatebart]

Yes, but it is not well documented...

You can find the reference to the config here:

https://vue-styleguidist.github.io/Configuration.html#enhancepreviewapp

[elevatebart]

If you find it in your heart to document this link in renderRootJsx documentation I would be really happy.

[d-ryabtsev]

If you find it in your heart to document this link in renderRootJsx documentation I would be really happy.

I eventually also found the enhancePreviewApp option which does seem to be what I want. However I get some errors which are not obvious

My code:

enhancePreviewApp: path.join(__dirname, 'styleguide.global.js')

styleguide.global.js:

import { defineEnhanceApp } from 'vue-styleguidist'
import PortalVue from 'portal-vue'

export default defineEnhanceApp(app => {
    app.use(PortalVue)
})

[d-ryabtsev]

@elevatebart I am yet to find a solution to this. Do you think this is an issue with vue-styleguidist? I am only seeing the errors when I try to use this function.

[elevatebart]

It looks like there is a tree shaking issue on webpack side. The defineEnhanceApp() function is only a helper so if you remove it entirely it should work better.

Another way, would be to use ts types in the JS file using JSDoc.

const PortalVue = require('portal-vue')

/** @type Parameters<typeof import('vue-styleguidist').defineEnhanceApp>[0] */
module.exports = (app) => {
  app.use(PortalVue)
}

https://github.com/elevatebart/test-app-enhance-preview-app

[mediafreakch]

I had errors when trying to use vue-styleguidist with vue 3 and vuetify 3 via the enhancePreviewApp option and the defineEnhanceApp() function as well. Error was Module parse failed: Unexpected character '�' (1:0).

Now I got it working by omitting defineEnhanceApp():

// styleguide.config.js
onst path = require("path");

module.exports = {
  title: "Default Style Guide",
  exampleMode: "expand",
  enhancePreviewApp: path.join(__dirname, "styleguidist/root.js"),
};

// styleguidist/root.js
import { createVuetify } from "vuetify";
import { aliases, mdi } from "vuetify/iconsets/mdi-svg";

import "vuetify/styles";

const vuetify = createVuetify({
  icons: {
    defaultSet: "mdi",
    aliases,
    sets: {
      mdi,
    },
  },
});

export default (app) => {
  app.use(vuetify);
};

You can see a working example on stackblitz

[elevatebart]

Thank you so much @mediafreakch

That helps a ton.

Maybe I should make this helper function in another file.

[d-ryabtsev]

@mediafreakch thank you very much. This indeed helps me achieve what I wanted.