Custom Quasar components in separate projects

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

    1. Within the components / drive and pages / drive directories I have everything related to the drive application
    2. 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.

  • 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

  • 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.

  • 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! 😁


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


  • @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

Log in to reply