Custom Quasar components in separate projects

yosa

My scenario:
I have a project created with quasar-cli in which the code of the pages and the components are grouped by application:

Within the components / drive and pages / drive directories I have everything related to the drive application
Within the components / calendar and pages / calendar directories I have everything related to the calendar application

Each application has its pages and its components. All these within a project built with quasar-cli.

The question, Is it possible to separate these applications according to the rules?

The separation that I am looking for is that they can share the base code of a project made with quasar-cli.
That the components of both pages and components can be used in a single project keeping the application code separate in different projects.

mKomo

Hi there, In order to use the components and pages of both projects I’d look into vue-router

const routes = [
      {
        path: "/",
        component: () => import("layouts/MyLayout.vue"),
        children: [
          {
            path: "",
            name: "drive",
            component: () => import("pages/drive/Index.vue"),
          },
          {
            path: "",
            name: "calendar",
            component: () => import("pages/calendar/Index.vue"),
          },
        ]
      }
    ];

and in your pages import the respective components via:

import calendarcomp from "components/calendar/calendarcomp.vue";

For more info here’s a link to the docs for vue-router

yosa

Hi @mKomo , thanks for your reply.

I use the routes in the same way you explain to me.
The idea is to separate those routes out of the project. Since my file of routes is immense. That’s why the idea of separating into different projects.

Anyway I appreciate your comments, saludos.

Cego

@yosa What about shared modules? https://blog.pusher.com/building-external-modules-vuejs/

s.molinari

You could create app extensions. One for the code from your drive app code and the other for the calendar app code. You can then use quasar ext add <ext-id> to test and build each app. And later quasar ext remove <ext-id> to take it out of the “base code”. Programming updates would be made to each extension’s code base.

We haven’t yet come to documenting this completely. It’s in work. Once app extensions are known, understood and used by the dev community, it will catapult Quasar…to infinity and beyond!

Scott

s.molinari

Btw, the first docs on app extensions have now been published.

https://v1.quasar-framework.org/app-extensions/introduction

Scott

yosa

@s-molinari Thanks for the support, Quasar is an awesome tool
@Cego I have not used what you say, I think of using npm link

Thanks guys, if I find a way I tell them

No More Posting New Topics!

Custom Quasar components in separate projects