ico-lib2 v0.0.11
Export Vue library with native Vue components, created from nested UI5 Web Components
The Library Part
Create new Vue app npm create vue@latest
Install ui5 web components npm install @ui5/webcomponents
Install fiori web components npm install @ui5/webcomponents-fiori
Install icons npm install @ui5/webcomponents-icons
*You may need to install babel types, for typescript exporting to work npm install --save-dev @babel/types
Use sample page for more complex component from here Import all these (in your .vue component file), in order for the components to work:
<script setup lang="ts">
import "@ui5/webcomponents-fiori/dist/Page.js";
import "@ui5/webcomponents-fiori/dist/Bar.js";
import "@ui5/webcomponents/dist/Button.js";
import "@ui5/webcomponents/dist/Label.js";
import "@ui5/webcomponents-icons/AllIcons.js"
</script>
Comment out all the stuff from /assets/main.css
so it does not overwrite the ui5 component css.
- maybe everything in /assets is useless
Create /src/index.ts
- where we export all the components in the world:
import IcoComponent from "./components/IcoComponent.vue";
export { IcoComponent };
Now tell Vue we are building a library and what options to use. In your vite.config.ts
add the build section. It should look something similar to this:
import { resolve } from "path";
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue({
template: {
compilerOptions: {
isCustomElement: (tag) => tag.startsWith('ui5-'),
}
}
}),
vueJsx(),
],
build: {
lib: {
// src/indext.ts is where we have exported the component(s)
entry: resolve(__dirname, "src/index.ts"),
name: "IcoComponentLibrary",
// the name of the output files when the build is run
fileName: "ico-lib2",
},
rollupOptions: {
// make sure to externalize deps that shouldn't be bundled
// into your library
external: ["vue"],
output: {
// Provide global variables to use in the UMD build
// for externalized deps
globals: {
vue: "Vue",
},
},
},
},
});
Now let's edit our package.json
to look like this (TODO write what each field is for):
{
"name": "ico-lib2",
"version": "0.0.1",
"private": false,
"type": "module",
"files": ["dist"],
"main": "./dist/ico-lib2.umd.cjs",
"module": "./dist/ico-lib2.js",
"exports": {
".": {
"types": "./dist/index.d.ts",
"import": "./dist/ico-lib2.js",
"require": "./dist/ico-lib2.umd.cjs"
}
},
"scripts": {
"dev": "vite",
"build": "vite build && vue-tsc --emitDeclarationOnly",
"types": "vue-tsc ",
"preview": "vite preview",
"build-only": "vite build",
"type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
"format": "prettier --write src/"
},
"dependencies": {
"@ui5/webcomponents": "^1.19.1",
"@ui5/webcomponents-fiori": "^1.19.1",
"@ui5/webcomponents-icons": "^1.19.1",
"vue": "^3.3.4"
},
"devDependencies": {
"@rushstack/eslint-patch": "^1.3.3",
"@tsconfig/node18": "^18.2.2",
"@types/node": "^18.18.5",
"@vitejs/plugin-vue": "^4.4.0",
"@vitejs/plugin-vue-jsx": "^3.0.2",
"@vue/eslint-config-prettier": "^8.0.0",
"@vue/eslint-config-typescript": "^12.0.0",
"@vue/tsconfig": "^0.4.0",
"eslint": "^8.49.0",
"eslint-plugin-vue": "^9.17.0",
"npm-run-all2": "^6.1.1",
"prettier": "^3.0.3",
"typescript": "~5.2.0",
"vite": "^4.4.11",
"vue-tsc": "^1.8.19"
}
}
In order for vue-tsc --emitDeclarationOnly
to work, add the following compiler options to our tsconfig.json
(the one configuration file to rule them all):
"compilerOptions": {
"outDir": "dist",
"declaration": true,
}
Exclude main.ts and App.vue from being exported in the same tsconfig.json:
"exclude": ["src/App.vue", "src/main.ts"],
I think you should build the app with npm run build
Then go to the package json and ammend the files
field with src/components
:
"files": ["dist", "src/components"],