%CUSTOM_PLUGIN_SERVICE_DESCRIPTION%
First thing you need to do is install the dependencies. Enable Yarn running
corepack enable
(or install it as a global dependency with npm i -g yarn
for Node < 16.9.0), and run
yarn install
Note
If you whish to use NPM instead of Yarn, simply delete the
yarn.lock
file and runnpm install
.
Once you have the dependencies in place, run
yarn start
to spin up the application.
The lifecycle hooks needed by micro-lc are automatically created in the built entrypoint by a custom Vite plugin.
You need to set the base
property in vite.config.ts file to the path where static asses will be
found once the application is loaded in micro-lc (i.e., the entry
property of the application in micro-lc configuration).
For example, if your Vue application is registered in micro-lc with the following configuration:
{
"applications": {
"vue3-parcel": {
"integrationMode": "parcel",
"route": "./vue3-parcel/",
"entry": "/my-micro-lc-vue-parcel/",
"injectBase": true
}
}
}
the base
property in vite.config.ts file should be /my-micro-lc-vue-parcel/
.
Applications build with this template can be used as-is in micro-lc as parcels.
An example configuration may be:
{
"applications": {
"vue3-parcel": {
"integrationMode": "parcel",
"route": "./vue3-parcel/", // <-- must have the ending "/", should have the starting "."
"entry": "/my-micro-lc-vue3-parcel/", // <-- must have the ending "/"
"injectBase": true // TODO
}
}
}
The internal routing of the application is already set up to work in micro-lc, meaning that the base url of the application is dynamically
computed on the bases of micro-lc <base>
, as explained in the official documentation.
When registering new routes, remember to prepend the base of the parcel. You can obtain it calling the getBasePath
function
exposed by basePath.ts and taking the property parcelBase
of the result. A running example can be
found in router/index.ts:
import { getBasePath } from '@/basePath'
const createVueRouter = () => {
const paths = getBasePath()
const router = createRouter({
routes: [
{
path: paths.parcelBase,
name: 'home',
component: HomeView
}
]
})
}
In a similar way, parcel base path should be also used in internal links. A running example can be found in App.vue:
<script setup lang="ts">
import { ref } from 'vue'
import { getBasePath } from './basePath'
const basePath = ref(getBasePath().parcelBase)
</script>
<template>
<RouterLink :to="basePath + 'about'">About</RouterLink>
</template>