From fd27c3b03f907a3c82ef4b752acc683888debce0 Mon Sep 17 00:00:00 2001 From: Gokulraj Date: Thu, 21 Sep 2023 15:21:14 +0530 Subject: [PATCH 1/3] Updating the README.md and resources/views/welcome.blade.php --- README.md | 47 +++++++++++++++++++++++-------- resources/views/welcome.blade.php | 4 +-- 2 files changed, 36 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 6af87b1..72a2d97 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# How to run the project +# How to Integrate Syncfusion EJ2 Vue Components in Laravel project The following steps is used to Integrate Syncfusion EJ2 Vue Rich Text Editor in Laravel using Vite. Skip to the getting started section if you have already configured the environment. @@ -48,7 +48,8 @@ cd example-app ``` -## Getting started +## Getting started from Laravel Project +This section describes how to add the React, EJ2 Components from scratch to the Laravel Project. ### 1. Install dependencies In the command prompt, run the following commands to install the dependencies. @@ -98,16 +99,27 @@ export default defineConfig({ ### 3. Add the root element to the welcome.blade.php file Add the root element to the welcome.blade.php file in the resources/views folder. ``` html - - - … - - - + + + + + + + Laravel + + + + + + @vite(['resources/js/app.js', 'resources/css/app.css']) + + + +
- + ``` ### 4. Add the following code to the app.js file to mount the Vue application @@ -156,16 +168,27 @@ export default { ``` -### 6. Build the project +## Run the Project +To run the project run the following commands. + +### 1. Build the project To build the project, run the following command. ```bash npm run build ``` -### 7. Run the project +### 2. Generate Key + +This section is only needed If the project is cloned from github. + +```bash +php artisan key:generate +``` + +### 3. Run the project To run the project, run the following command. ```bash php artisan serve ``` -Visit http://localhost:8000 in your browser to see the Laravel application with the integrated Syncfusion EJ2 Vue Rich Text Editor. +Visit http://localhost:8000 in your browser to see the Laravel application with the integrated Syncfusion EJ2 React Rich Text Editor. diff --git a/resources/views/welcome.blade.php b/resources/views/welcome.blade.php index d03f1be..a13ef80 100644 --- a/resources/views/welcome.blade.php +++ b/resources/views/welcome.blade.php @@ -12,9 +12,7 @@ @vite(['resources/js/app.js', 'resources/css/app.css']) - +
From b41579b4c87dbe0abfc2879f4cdbd371310ff0df Mon Sep 17 00:00:00 2001 From: Gokulraj Date: Thu, 21 Sep 2023 15:24:09 +0530 Subject: [PATCH 2/3] update --- README.md | 27 ++++++++++++++++++++++++--- 1 file changed, 24 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 72a2d97..71a8c11 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ # How to Integrate Syncfusion EJ2 Vue Components in Laravel project + The following steps is used to Integrate Syncfusion EJ2 Vue Rich Text Editor in Laravel using Vite. Skip to the getting started section if you have already configured the environment. @@ -6,6 +7,7 @@ Skip to the getting started section if you have already configured the environme ## Prerequisites Before getting started with Syncfusion Vue Rich Text Editor component in Laravel using Vite, check whether the following are installed in the developer machine. + * [PHP](https://www.php.net/downloads.php) - To download PHP. * [Node.js](https://nodejs.org/en/download/) - To download Node.js. * [Laravel](https://laravel.com/docs/8.x/installation) - To install Laravel. @@ -34,7 +36,6 @@ composer global require laravel/installer ## Create a Laravel project - #### For Windows users ```bash @@ -47,33 +48,42 @@ Now change the directory to the example-app folder. cd example-app ``` - ## Getting started from Laravel Project + This section describes how to add the React, EJ2 Components from scratch to the Laravel Project. ### 1. Install dependencies + In the command prompt, run the following commands to install the dependencies. Install the dependencies of the laravel project. + ```bash composer install ``` + If you are getting any error while installing the dependencies, run the following command. + ```bash composer install --ignore-platform-req=ext-fileinfo ``` Install the vue js dependencies. + ```bash npm install vue@next @vitejs/plugin-vue ``` + Install the Syncfusion EJ2 Vue Rich Text Editor package. + ```bash npm install @syncfusion/ej2-vue-richtexteditor ``` ### 2. Configure the vite.config.js file + Add the following code to the vite.config.js file in the root directory of the project. + ```js import { defineConfig } from "vite"; import laravel from "laravel-vite-plugin"; @@ -96,8 +106,11 @@ export default defineConfig({ ], }); ``` + ### 3. Add the root element to the welcome.blade.php file + Add the root element to the welcome.blade.php file in the resources/views folder. + ``` html @@ -123,6 +136,7 @@ Add the root element to the welcome.blade.php file in the resources/views folder ``` ### 4. Add the following code to the app.js file to mount the Vue application + ```js import { createApp } from "vue"; import Welcome from "./Welcome.vue"; @@ -131,6 +145,7 @@ createApp(Welcome).mount("#app"); ``` ### 5. Create a Welcome.vue file in the resources/js folder and add the following code + ```vue