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"],