diff --git a/README.md b/README.md index 5e50378..16bedd9 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,14 @@ -# getting-started-with-the-vue-tab-component +# Getting Started with the Vue Tab Component A quick start Vue project that shows how to add the Vue Tab component to a Vue application. It shows how to customize the header position, apply styles to the active header, render HTML elements and display the overflowing headers using the scroller and popup. + +Refer to the following documentation to learn about the Vue Tab component: +https://ej2.syncfusion.com/vue/documentation/tab/getting-started-vue-3 + +Check out this online example of the Vue Tab Component: +https://ej2.syncfusion.com/vue/demos/#/material3/tab/default.html + +Make sure that you have the latest versions of NodeJS and Visual Studio Code in your machine before starting to work on this project. + +### How to run this application? + +To run this application, you need to clone the `getting-started-with-the-vue-tab-component` repository and then open it in Visual Studio Code. Now, simply install all the necessary vue packages into your current project using the `npm install` command and run your project using the `npm run dev` command. diff --git a/index.html b/index.html new file mode 100644 index 0000000..8388c4b --- /dev/null +++ b/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + Vue + + +
+ + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..a57b9fa --- /dev/null +++ b/package.json @@ -0,0 +1,21 @@ +{ + "name": "myvueapp", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "dependencies": { + "@syncfusion/ej2-vue-buttons": "^22.2.8", + "@syncfusion/ej2-vue-navigations": "^22.2.7", + "@syncfusion/ej2-vue-popups": "^22.2.7", + "vue": "^3.3.4" + }, + "devDependencies": { + "@vitejs/plugin-vue": "^4.2.3", + "vite": "^4.4.5" + } +} diff --git a/public/vite.svg b/public/vite.svg new file mode 100644 index 0000000..e7b8dfb --- /dev/null +++ b/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/App.vue b/src/App.vue new file mode 100644 index 0000000..f99776c --- /dev/null +++ b/src/App.vue @@ -0,0 +1,67 @@ + + + + diff --git a/src/assets/vue.svg b/src/assets/vue.svg new file mode 100644 index 0000000..770e9d3 --- /dev/null +++ b/src/assets/vue.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue new file mode 100644 index 0000000..f5e4f53 --- /dev/null +++ b/src/components/HelloWorld.vue @@ -0,0 +1,40 @@ + + + + + diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..2425c0f --- /dev/null +++ b/src/main.js @@ -0,0 +1,5 @@ +import { createApp } from 'vue' +import './style.css' +import App from './App.vue' + +createApp(App).mount('#app') diff --git a/src/style.css b/src/style.css new file mode 100644 index 0000000..e69de29 diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000..05c1740 --- /dev/null +++ b/vite.config.js @@ -0,0 +1,7 @@ +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [vue()], +})