Vue.js app with plugins without a build process, how to do it?

Question

I know one can develop vue.js application without build process, for example by including

<script src="https://unpkg.com/vue@3"></script>.

But what about plugins? Let's say I want to use vue-good-table, should I find a link for every minified javascript file for every plugin, and their dependencies too?

Is there an easy way to do it?

The reasons are explained here, I need to add functionality to existent web applications.

Answer 1

vue-good-table-next (for Vue 3) has a "global" build that works via CDN, but it expects window.vue to already be defined, so you'd have to import vue first (which defines window.Vue), and assign a global vue to Vue:

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<script>
  // workaround: VueGoodTable expects 'vue' to be defined
  window.vue = window.Vue;
</script>

<script src="https://unpkg.com/[email protected]/dist/vue-good-table-next.global.prod.js"></script>
<link
  rel="stylesheet"
  href="https://unpkg.com/[email protected]/dist/vue-good-table-next.css"
/>

Then, VueGoodTable.default is defined as the vue-good-table plugin, which can be installed on the app instance via app.use():

<div id="app">
  <vue-good-table ?></vue-good-table>
</div>

<script>
const app = Vue.createApp({?})
app.use(VueGoodTable.default)
app.mount('#app')
</script>

demo