Using Vue SFC into existing Web pages with CDN vue

Question

I would like to ask what is the best approach to include and reuse Vue components that are written in .vue files (SFC), into existing web pages.

For example lets say there is already an SPA project and also an ASP Core project. I would like to reuse my ~/SPA Dir/components/*.vue into my Razor pages or just plain HTML pages. To be more specific the web pages are using Vue through the CDN js file.

In most Vue tutorials it is often mentioned how Vue is used to create SPAs or it can be used in already existing web pages. And there is also emphasis on the reusability of its' components. But it seems very frustrating and complex to follow those guidelines with often lacking and unclear guides.

From my research I realize that there must be an intermediate build process that will produce js files form the vue files. And also the need of tools like vue-loader and webpack. But still I could not find something straight to the point.

Is there a more straightforward approach or what is the most common approach to the above-mentioned scenario.

(Vue version: 3)

Thank you

Answer 1

Maybe try this SFC loader: https://github.com/FranckFreiburger/vue3-sfc-loader

I use it on my PHP server, where I have my .vue components and I need to compile them as .js.