Best practices for combining an app and a component library

[karlludwinski]

Are there any best practices for exporting a component out of an existing app to be used in other projects? Or is that just a bad idea, and the app and library should always be separate projects? If the app is essentially just the component by itself, it feels like it would be a natural pattern to combine them, but I can't find examples of it and am curious about certain implications such as sharing a package.json.

An example instance where I want to implement this is a component that displays a 3D CAD model via a passed in part number. I need to use this by itself on the website, as well as inside of other Vue apps. Right now the component is in its own library project that exports it to use in other Vue projects, and one of those is basically just a wrapper - it's importing the component and using that in App.vue, and all it's adding is an event listener to get the part number from the web page it is embedded on. It would be simpler to have one project for that instead of two.

Here's an example repo of a new npm init vue@latest app tweaked to export the HelloWorld.vue component:

https://github.com/karlludwinski/vue-app-with-library

This commit is all of the changes from the initial creation for the library:

karlludwinski/vue-app-with-library@69add8c

Summary of changes:

1. Add a library entry file to export your desired components (src/library.js).
2. Add a second Vite config to target this entry file and build using library mode (vite.lib-config.js).
3. Add an additional vite build script in package.json using this new config file, along with the additional properties needed for the library package (files, main, module, exports).

Since it's one project, the app and the library share the package.json, meaning they have the same name, dependencies, etc. Naturally this could be a problem if the "app" part needed more dependencies than the library, but if it doesn't, is that a problem? The fact that I can't find examples or people talking about it makes me think there's a reason for that. :)