Add global plugin to preview's app

[davidmeirlevy]

When my component is using a global function that should exist at the root level of the app (for example - $t('my-text')), the preview doesn't work.

Describe the solution you'd like A clear and concise description of what you want to happen. A way to inject global plugins or to manage the preview's Vue App easily.

Describe alternatives you've considered Another tab, besides "properties" and "console", that will allow me to edit the preview's app directly. this configuration should be shared across components of the same project (up to the nearest package.json, in case the root folder is a monorepo).

Additional context Add any other context or screenshots about the feature request here.

[fwouts]

Good idea! Thanks for the suggestion 😁

[davidmeirlevy]

I managed to workaround this using the wrapper component. In vue, I injected plugins using the component's context, like:

const {app} = getCurrentInstance() app.use(mockRouter)

[mheers]

For Vue2 you can also create the __previewjs__/Wrapper.vue with something like the following content:

<template>
  <div class="wrapped">
    <slot />
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue)

import i18n from '@/i18n'
export default Vue.extend({
  i18n,
})
</script>

<style lang="sass">
@import '../node_modules/bootstrap/scss/bootstrap'
@import '../node_modules/bootstrap-vue/src/index.scss'
</style>