Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

jimmyhowedotcom's avatar

Best approach for using multiple Vue apps in project (what would you do)

HI guys,

Bare with me here:

I'm looking for some help regarding my set up. Basically I built my old website using Laravel-breeze with inertia and Vue. I wanted to build some Tools for demonstrations purposes on my app, so I created Vue components inside the app (resources/js/Pages/Tools) and just included them as part of the main site pages. This is great because all of the apps are built alongside my project, however they are tied to the site.

However I'm rebuilding my website and what I want is to make these tools individual Vue apps that I can move about projects, e.g. without moving the Vue files from my old project to the now one manually, or even put them on StackBlitz for instance to demo them etc.

Whats the best way to go about this? Are there any best practices?

My first thoughts are just create new Vue (Vite) apps, give them their own repository, stick them on StackBlitz and for each tool page, create an iFrame to show the tool on the page? This kind of works, but I have to have the StackBlitz editor in the frame.

I've also looked into component library's but looks like this would be a pain to maintain when things change.

So basically I cant to have Vue tools that render in my app, can be moved about different projects easily and included in other projects or sub domains and work without much messing about?

I should also say I'm not all too familiar with roll up and build targets, I could never get them working...

I know this is an ambiguous question, there might not be a best answer, but anybody who has done this would be great help to point me in the right direction. What would yous do?

Thank

0 likes
10 replies
ekrist1's avatar

It really depends what kind of tools it is. Does it exchange data with the backend? Is there any form of authentication or authorisation? Is it tightly integrated with the main site? If it's standalone tools, I guess one solution would be to create a separate Vue/Nuxt app, host it on Netlify with a subdomain.

1 like
jimmyhowedotcom's avatar

Thanks for the reply @ekrist1 ... yeah its just tools I'm building for fun/learning/demonstrations etc, (see https://jimmyhowe.com/tools) ... right now they just store data in local storage, so no integrations with the main site, although I'd like to develop some further and then maybe put them in a full app.

I guess the thing that confuses me is, If I build an app, then I have the whole app scaffolding, eg index.html, etc ... and if I want to just drop this app into say, a blog post or page somewhere, I don't really want the full SPA, just the components that makes up the tool, hope that makes sense?

I did come across this (https://www.youtube.com/watch?v=5QV9wVc8c7g) and maybe this is a solution? And use a library something like headlessui, or something similar, then can pull it in via yarn? Just trying to get my head round how it all fits together.

martinbean's avatar

@jimmyhowedotcom I think you need to stop thinking “apps” and start thinking “components”.

If you want components to be reusable in a myriad of contexts then you need to create self-contained components that have their own internal state, created from props, and render their data in its own template. Once you have your components, you can include them where and when you want.

You can then register your components:

// Vue 2.x
import Vue from 'vue';

Vue.component('foo-component', import('./components/FooComponent.vue').default);

Vue.mount('#app');

// Vue 3.x
import { createApp } from 'vue';

const app = createApp({});

app.component('foo-component', () => import('./components/FooComponent.vue'));

app.mount('#app');

And then use them in your Blade templates:

<html>
  <body>
    <div id="app">
      <!-- Some mark-up -->
      <foo-component></foo-component>
      <!-- Some more mark-up -->
    </div>
  </body>
</html>
ekrist1's avatar

If you don't want the demonstration tools to be part of your codebase, using Vue components, one of many solution is to build a playground Nuxt-app on a separate sub-domain, with the same header, footer and layout as your main site. The disadvantage is that you will need to keep the layout in sync and maintaining the two codebases. If you are developing reusable Vue components, then I would make a library and publish it on Github and npm, but it seems like your tools are complete and separate Vue(?) apps, so another solution is to just embed a demo-app from StackBlitz to your site.

1 like
martinbean's avatar

I'm trying to to create a vite app just for the components and pull it down via NPM into my main project, I think I'm confused how to go about creating an independent vue app that I can pull in, like headless ui, where I can just pull in the components but its going terribly, see

@jimmyhowedotcom Again, you need to stop thinking “apps” and start thinking “components”.

And Vite has nothing to do with Vue. Vite is just a build tool, like Mix.

1 like
jimmyhowedotcom's avatar

@martinbean yeah sorry I think my terminology is off here, I guess what I’m trying to say is I want to extract my components embedded in my Inertia-Vue website, and create a component library that contains all the components that make up a tool, then I can create multiple places, tools page, stackblitz… I’m struggling to find a straight forward way of bundling the components into a package that I can reuse across projects etc

martinbean's avatar

@jimmyhowedotcom I showed you how you’d use a component, but then you still tried to create fully-fledged “apps” and use them between different projects. You don’t share “apps”; you share components.

When you download a Vue library from NPM, it’ll be a component. Not a full app. You need to do the same.

jimmyhowedotcom's avatar

@martinbean yes, I understand that! And I know what an app and a component is, I'm talking about bundling them into reusable libraries. Your example shows using components from the same project, which is not what I'm talking about. And I understand that if I download a Vue library its still components, its the bundling that I was talking about, npm, rollup, webpack, all that stuff that creates the library that allows you to import them together as one. So for example:

<MyTool>
    <MyToolLabel name="bla">
</MyTool>

If that is a part of my initial "app", and i want to extract it to a component library to use it in other projects, that's where I am stuck. So in Project B, I want to run 'yarn add my-vue-tools' and be able to use them. Its not Vue itself that I'm struggling with, or the difference between an app and a component, its the 'how-to' of creating a library of reusable components from an already existing project. I hope you get what I mean, how to take x components, extract them to a library, use them in multiple apps, etc

I've had a look about Laracasts, but couldn't find anything, if you have any links or tutorials you are aware of that would be helpful.

Please or to participate in this conversation.