SAP-samples
diff --git a/‎.eslintrc.js
+1-3 b/‎.eslintrc.js
+1-3
diff --git a/‎README.md
+19-30 b/‎README.md
+19-30
diff --git a/‎babel.config.js
-5 b/‎babel.config.js
-5
diff --git a/‎public/index.html renamed to ‎index.html
+2-2 b/‎public/index.html renamed to ‎index.html
+2-2
@@ -1,11 +1,9 @@
 module.exports = {
 	extends: [
 		"eslint:recommended",
-		// "plugin:vue/vue3-recommended",
-		"plugin:vue/recommended" // Use this if you are using Vue.js 2.x.
+		"plugin:vue/vue3-recommended",
 	],
 	env: {
 		"node": true,
 	},
-	parser: "@babel/eslint-parser",
 };
@@ -22,9 +22,9 @@ This project was bootstrapped with [Vue CLI](https://cli.vuejs.org/)
     npm install
     ```
 
-1. Start a local server and run the application. (The running application can be found here: http://localhost:8080)
+1. Start a local server and run the application. (The running application can be found here: http://localhost:5173)
     ```sh
-    npm run serve
+    npm run dev
     ```
 
 
@@ -49,40 +49,29 @@ Then, you can use the custom element in an HTML page:
 
 Currently Chrome, Safari, Firefox and Edge (Chromium-based) support Web Components natively.
 
-
 ## Configure Vue to work with Web Components defined outside of it
-To use Web Components in Vue Application a configuration option should be provided in the `main.js` file to tell the Vue about these components. More can be found in the documentation of [Vue.config.ignoredElements](https://vuejs.org/v2/api/#ignoredElements):
 
-**main.js**
-```js
-Vue.config.ignoredElements = [/^ui5-/];
-```
+It is recommended to exclude our custom elements from component resolution by specifying `compilerOptions.isCustomElement` in our `vite.config` file.
 
+```ts
+// vite.config.js
 
-## Configure Vue Build
-When UI5 Web Components are used they include all of their translation files and CLDR data files in the application bundle.
-In order to decrease the bundle size of the application a custom Webpack configuration should be provided. 
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
 
-Create `vue.config.js` file:
-
-**vue.config.js**
-```js
-module.exports = {
-  configureWebpack: {
-    module: {
-      rules: [
-        {
-          test: [/cldr\/.*\.json$/, /i18n\/.*\.json$/],
-          loader: 'file-loader',
-          options: {
-            name: 'static/media/[name].[hash:8].[ext]',
-          },
-          type: 'javascript/auto'
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [
+    vue({
+      template: {
+        compilerOptions: {
+          // treat all tags with a "ui5-" prefix as custom elements
+          isCustomElement: tag => tag.startsWith('ui5-')
         }
-      ]
-    }
-  }
-};
+      }
+    })
+  ]
+})
 ```
 
 ### Where is the npm package?
 
@@ -4,14 +4,14 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>UI5 Web Components Vue Sample Application</title>
   </head>
   <body>
     <noscript>
       <strong>We're sorry but ui5-webcomponents-sample-vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
     </noscript>
-    <div id="app"></div>
+    <div id="app" style="height: 100%;"></div>
+    <script type="module" src="/src/main.js"></script>
     <!-- built files will be auto injected -->
   </body>
 </html>