From c4138d34b28c10ad61f7d5a8b08e07bac6f8ca21 Mon Sep 17 00:00:00 2001 From: MeenaAlagiah <117711147+MeenaAlagiah@users.noreply.github.com> Date: Tue, 8 Aug 2023 20:05:02 +0530 Subject: [PATCH 1/2] Committing the Vue Kanban Getting Started video --- index.html | 13 +++ package.json | 19 +++++ public/vite.svg | 1 + src/App.vue | 149 ++++++++++++++++++++++++++++++++++ src/assets/vue.svg | 1 + src/components/HelloWorld.vue | 40 +++++++++ src/main.js | 5 ++ src/style.css | 0 vite.config.js | 7 ++ 9 files changed, 235 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..454c696 --- /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-kanban": "^22.2.5", + "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..0e19ff9 --- /dev/null +++ b/src/App.vue @@ -0,0 +1,149 @@ + + + + + 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()], +}) From 05b5d6710a42a2f860eb6b2293a523db5e8cc16f Mon Sep 17 00:00:00 2001 From: MeenaAlagiah <117711147+MeenaAlagiah@users.noreply.github.com> Date: Tue, 8 Aug 2023 20:09:20 +0530 Subject: [PATCH 2/2] Committing the readme file --- README.md | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 928b30d..3bd1d9e 100644 --- a/README.md +++ b/README.md @@ -1 +1,14 @@ -# getting-started-with-the-vue-kanban-component \ No newline at end of file +# Getting Started with the Vue Kanban Component +A quick start Vue project that shows how to add the Vue Kanban Component to a Vue application. It includes a code snippet for binding data from the remote data source, enabling the swimlane feature, and setting custom height and width. It also includes a code snippet for adding a tooltip and validate columns. + +Refer to the following documentation to learn about the Vue Kanban component: +https://ej2.syncfusion.com/vue/documentation/kanban/getting-started-page + +Check out this online example of the Vue Kanban Component: +https://ej2.syncfusion.com/vue/demos/#/material3/kanban/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-kanban-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.