From 28050c19121d3de91767ab840128f3b0fe4e29c5 Mon Sep 17 00:00:00 2001 From: MeenaAlagiah <117711147+MeenaAlagiah@users.noreply.github.com> Date: Tue, 10 Oct 2023 19:18:39 +0530 Subject: [PATCH 1/2] Committing the readme file --- README.md | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index bea23ae..7b08194 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,13 @@ -# getting-started-with-the-vue-split-button-component -A quick start project that shows how to add the Syncfusion Vue Split button component to a Vue application. It shows how to add a separator and display icons in the split button. It also shows how to customize the icon position. +# Getting Started with the Vue Split Button Component +A quick start Vue project that shows how to add the Vue Split button component to a Vue application. It shows how to add a separator and display icons in the split button. It also shows how to customize the icon position. + +Refer to the following documentation to learn about the Vue Split Button component: +https://ej2.syncfusion.com/vue/documentation/split-button/vue-3-getting-started + +Check out this online example of the Vue Split Button Component: +https://ej2.syncfusion.com/vue/demos/#/material3/button/split-button.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-split-button-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. From 35c9133dde6493e93bfdd27944cc2be276a0d43b Mon Sep 17 00:00:00 2001 From: MeenaAlagiah <117711147+MeenaAlagiah@users.noreply.github.com> Date: Tue, 10 Oct 2023 19:20:44 +0530 Subject: [PATCH 2/2] Committing the Vue Split Button Getting Started video --- index.html | 13 +++++++++ package.json | 19 +++++++++++++ public/vite.svg | 1 + src/App.vue | 50 +++++++++++++++++++++++++++++++++++ src/assets/vue.svg | 1 + src/components/HelloWorld.vue | 40 ++++++++++++++++++++++++++++ src/main.js | 6 +++++ src/style.css | 0 vite.config.js | 7 +++++ 9 files changed, 137 insertions(+) create mode 100644 index.html create mode 100644 package.json create mode 100644 public/vite.svg create mode 100644 src/App.vue create mode 100644 src/assets/vue.svg create mode 100644 src/components/HelloWorld.vue create mode 100644 src/main.js create mode 100644 src/style.css create mode 100644 vite.config.js 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..c112405 --- /dev/null +++ b/package.json @@ -0,0 +1,19 @@ +{ + "name": "myvueapp", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "dependencies": { + "@syncfusion/ej2-vue-splitbuttons": "^23.1.36", + "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..18f5af9 --- /dev/null +++ b/src/App.vue @@ -0,0 +1,50 @@ + + + + + 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..a2f8dee --- /dev/null +++ b/src/main.js @@ -0,0 +1,6 @@ +import { createApp } from 'vue' +import './style.css' +import App from './App.vue' +import { registerLicense } from '@syncfusion/ej2-base'; +registerLicense("ORg4AjUWIQA/Gnt2V1hhQlJCfVhdXGpWfFN0RnNedVx2flRCcC0sT3RfQF5jTn5UdkJhXnpWcH1cQA=="); +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()], +})