Add a Vue App that uses the components library

1. Add a new vue app through the Vue CLI or manually in the /packages directory.
2. For convention's sake, prefix the package's name with rs-. Example: /projects/rs-new-vue-app
3. In your new app's root, create vue.config.js if it doesn't already exist.
4. We need paths to the rs-components package aliased in the new project. Add the following chainWebpack function to vue.config.js (or add to this function if it already exists):

module.exports = {
  ...existingConfigOptions,

  chainWebpack: (config) => {
    config.resolve.alias.set('@atoms', path.join(__dirname.replace(path.basename(__dirname), ''), 'rs-components/src/components/atoms'))
    config.resolve.alias.set('@molecules', path.join(__dirname.replace(path.basename(__dirname), ''), 'rs-components/src/components/molecules'))
    config.resolve.alias.set('@organisms', path.join(__dirname.replace(path.basename(__dirname), ''), 'rs-components/src/components/organisms'))
    config.resolve.alias.set('@templates', path.join(__dirname.replace(path.basename(__dirname), ''), 'rs-components/src/components/templates'))
    config.resolve.alias.set('@styles', path.join(__dirname.replace(path.basename(__dirname), ''), 'rs-components/src/assets/styles'))
  }
}

5. Next, we need a couple packages: yarn workspace <your project's name> add boostrap-vue vue-fragment v-calendar vue-carousel
6. Now we will link our local dependencies. Open your app's package.json and add these under "dependencies":

"rs-components": "*",
"rs-utilities": "*"

Run npx lerna bootstrap in your terminal.

7. Now open src/main.ts, where your Vue app is being initialized. We are going to import and use dependencies app-wide:

...
import BootstrapVue from 'bootstrap-vue';
import Fragment from 'vue-fragment';
import { utilitiesPlugin, mixin } from 'rs-utilities';
import RSComponents from 'rs-components/src/components';

Vue.config.productionTip = false;

Vue.use(utilitiesPlugin); // For typescript, may have to set as`Vue.use(utilitiesPlugin as any);`
Vue.use(BootstrapVue);
Vue.use(Fragment.Plugin);
Vue.use(RSComponents);
Vue.mixin(mixin);

8. IF USING TYPESCRIPT - Add an augmentor and a shims file to /src so TypeScript doesn't complain.

// plugin-augmentor.d.ts

import { IRentsyncVueInstance } from 'rs-utilities';
import Vue from 'vue';

declare module 'vue/types/vue' {
  interface Vue extends IRentsyncVueInstance {}
}

Next, Copy the shims-common.d.ts file from rs-components in the monorepo to your project's /src directory.

9. Now copy any images and subdirectories in rs-components/public into your app's own /public directory.

10. Your app is set. There are a lot of steps involved with this process, but it ensures a proper build cycle of the components library and allows for working in rs-components and your Vue app simultaneously.

11. This might turn into a Hygen thing, loooool.