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. 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()], +})