Vuejs, tailwindcss and frappeUI set up in bench - ashish-greycube/help GitHub Wiki

Manual Steps:

1. In Bench Folder Create new vue app:

Ref: https://youtu.be/RV-FuSr3TJ8?list=PLQGFK8RiEPSII8N7iwhjqrPTQXq1T42Jl&t=3534

npm create vue@latest

cd vue-app-name/

npm install

2. Install Tailwind CSS in vue-app:

Ref: https://tailwindcss.com/docs/guides/vite#vue

cd vue-app-name/

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

Integrating tailwindcss into vue-app:

https://youtu.be/XKY_ypnsNfE?list=PLQGFK8RiEPSII8N7iwhjqrPTQXq1T42Jl&t=4477

3. Install frappe-ui in vue-app:

npm install frappe-ui

Add Frappe-UI into vue-app

https://youtu.be/Ik-Y6zN3Bkw?list=PLQGFK8RiEPSII8N7iwhjqrPTQXq1T42Jl&t=635

github ref:

https://github.com/frappe/builder/blob/develop/frontend/vite.config.mj

https://github.com/frappe/builder/blob/develop/frontend/tailwind.config.js

4. Add vue-app into Frappe Custom App

create new custom app

bench new-app app-name

install-app in site

bench --site site-name install-app app-name

Connect Vue-app with frappe custom-app: Ref- https://youtu.be/Ik-Y6zN3Bkw?list=PLQGFK8RiEPSII8N7iwhjqrPTQXq1T42Jl&t=2294

Using Doppio:

bench get-app https://github.com/NagariaHussain/doppio

ref: https://github.com/NagariaHussain/doppio?tab=readme-ov-file#doppio

1. Create Custom new-app:

bench new-app app_name

2. Add frappe-ui:

bench add-frappe-ui

3. create desk page:

bench --site <site-name> add-desk-page --app <app-name>

"dev": "cd <your-vue-app-folder> && yarn dev",
"build": "cd <your-vue-app-folder> && yarn build"

or

npm run dev
npm run build

⚠️ GitHub.com Fallback ⚠️