How Can i connect vue with frappe

Frappe Framework
1

I want to connect my app with vue. same as frappe desk do, so how can i do this.

1 Like
2

Hi:

Take a look here:

Hope this helps.

1 Like
3

Thank For Advice it’s work for me. but i need to run all time $yarn dev command any solution for this.

4

this might help GitHub - netchampfaris/frappe-ui-starter: A Vite + Vue 3 + TailwindCSS + Frappe UI starter template for building frontends for Frappe Apps. to run yarn dev, command yarn dev inside the vue app folder. eg: /frontend: yarn dev

5

how can i manage in frappe cloud.
if i made a custom app and install frappe ui. then, i added this app to frappe cloud but its not working.

mydomain.frappe.cloud/frontend

6

Hi:

This webinar could be useful :slight_smile:

2 Likes
7

I think the question is not answered, which is how to start the vue app when $ bench start.

Without having to start the vue app $ yarn dev

I feel it might be related to package.json which have this,

  "scripts": {
    "postinstall": "cd frontend && yarn install",
    "dev": "cd frontend && yarn dev",
    "build": "cd frontend && yarn build"
  },

But I don’t know how this works.

Some hint here, Add `package.json` for managing npm modules · Issue #8761 · frappe/erpnext · GitHub

8

@buildwithhussain may be you can shed some light here.

What I did and still not succeed is to,

  1. follow steps, Frappe UI
  2. /todo/frontend/src/router.js, change to /todo
let router = createRouter({
  history: createWebHistory('/todo'),
  routes,
})
  1. Add package.json in /app/todo and run npm update
  2. bench start

This is not working yet.

9

I have also follow the build step here, GitHub - NagariaHussain/doppio: A Frappe app (CLI) to magically setup single page applications and Vue/React powered desk pages on your custom Frappe apps.

This seem to build the assets into public folder, but not in www folder.

And still not working yet.

10

Hi @kittiu:

Maybe using Procfile? Add a line to Procfile like this
vueapp: cd apps/yourapp/frontend/src && yarn dev

So bench start will execute this …

Note: I am not an expert (really far from this …), so maybe there are a better way.

1 Like
11

I can find the solution now, and here are the steps I did. I.e., we let’s create new app as “myapp”

  1. Create new frappe app, and also install.
$ bench new-app myapp
$ bench install-app myapp
  1. Create frappe-ui app using Frappe UI
$ cd apps/myapp
$ npx degit netchampfaris/frappe-ui-starter frontend
$ bench --site <sitename> set-config ignore_csrf 1

Note: after this, you can Start dev server yarn dev but this is not our issue here. Our issue is about building it so that the Vue app will run in frappe server environment.

  1. Edit frontend/src/router.js

Change

history: createWebHistory('/frontend'),

to

history: createWebHistory('/myappx'),
  1. Modify apps/myapp/fronend/package.json, to include the build script that deploy myapp.html to www folder.
  "scripts": {
    "dev": "vite",
    "build": "vite build --base=/assets/myapp/frontend/ && yarn copy-html-entry",
    "copy-html-entry": "cp ../myapp/public/frontend/index.html ../myapp/www/myapp.html"
  },
  1. Build vue app for production
$ cd frontend
$ npm install vite
$ yarn build

Check the myapp/www folder, it should have myapp.html. And now, it should be good to go to URL http://localhost:8000/myapp.

Additional step, to include the yarn bulid to bench build. Add apps/myapp/package.json
Ref: Add `package.json` for managing npm modules · Issue #8761 · frappe/erpnext · GitHub

{
    "scripts": {
        "build": "cd frontend && yarn build"
    }
}
2 Likes
12

hello, what you want is how to mount vue app to existing website/html tag (you can read about it), it can even mount to small sections in your html and even with multi vue apps.

you can check POS Awesome app which does that thing by targeting frappe page main tag and inject vue app into it

13

Thanks, I yours is another way (to inject vue into page), which what I try to do is to create a separated vue app (like insights).

But it is really good to know there are more ways :slight_smile: Thanks!

1 Like
14

Maybe I missunderstood the root issue … I didn’t need this kind of changes to get it. In production mode, just changed home_page route in web settings to redirect main url to vue app.

15

So can we do that for new module added to erpnext app?

16

but the “new Vue” not working in v15

17

hello, yes in 15 vue instance is not available publically in the window but you can use app.bundle.js in your app , import vue and use it. you can look in ready apps that work on 15 like drive, insights etc

check “used by” section, there are apps which use vue:

1 Like