A slightly better viewing in Vue

I never liked the routing of vue-router in Vue. It forces you to make a big file and you have to dig for quite a while in order to figure out which routes to add or update, along with checking the Vue Devtools ( which certainly helps ). lo and behold I've recently come across to this amazing package unplugin-vue-router! It allows us use something similar with nuxt page routing which I first used when I used Nextjs which was more intuitive and easy to handle, but then

⚠️ This package is still experimental. If you found any issue,
design flaw, or have ideas to improve it, please, open an
issue or a Discussion.

In a react-driven world, it's gonna be hard to convince a team, much less a manager to use it on your project.

Well let's try to create at least something manageable and not too outside dependent and should be easy to read even for newcomers and even newbies.

First, can we do something about the abomination of the the router.ts file?

We can, it's an array and an array of objects at that, it can be segmented depending on our needs.

What we can do first is move our views into a pages directory and we move the files depending on folder. The folder will be a representation of the URI when the user visits our page, just like ( you guessed it ) a 'Page'.

const routes = [
  {
    path: "/",
    name: "Parent1",
    component: () => import("@/layouts/ParentLayout.vue"),
    children: [
      {
        path: "/child1",
        children: [
          {
            path: "innerChild1",
            name: "Inner Child 1",
            component: () => import("@/pages/child1/index.vue"),
          },
          {
            path: ":id",
            name: "Inner Child 2",
            component: () => import("@/pages/child1/[id].vue"),
          },
          ...more children,
        ],
      },
    ],
  },
  ...repeat for more endpoints
];

We are kind of just copying the already conventions of nextjs and nuxt at this point, but how does this help us? If you start to see a pattern, the parent part and all of its children will 99% have the same sets of components that this page of components will only be using. Now we can adjust our directory to include components which this group of pages only use and be exclusively used by them and them only.

In my opinion it's also way easier to read and know what routes and which routes are connected based on folder structure alone. Devs in the first place is just a key press away ( at least those that I know ) from opening the folder structure which is already available while you are coding in a tab or two in your current IDE.

> pages
   > parent1
     child1.vue
     [id].vue
     > inner-child-1
        inner-child-1.vue
        index.vue
    > components
      parent-1-only.vue

There's discussion to be had regarding the naming conventions here. We can either use the suggested from Vue which is InnerChild.vue or inner-child.vue which makes sense of you are using kebab-casing on the templates anyways. For me it looks like just plain html at that point.

<template>
  <component-test-1>
    <component-test-2>
      <div>
        <h1>HTML!</h1>
      </div>
    </component-test-2>
  </component-test-1>
</template>

We can also use index.vue but it's harder to argue to use this since for someone in the team which searches for filenames it will always be index and it will show him a million similarly named files. It can be done through folder search but it's a discussion for the team.

In terms of our router, we can go a little bit further by extracting the folders on the routes itself, if the project gets way bigger.

> router
   router.ts
   > routes
     parent1.ts
     parent2.ts
     parent3.ts

In our file of routes.ts.

const routes = [
  {
    path: "/",
    name: "Parent1",
    component: () => import("@/layouts/ParentLayout.vue"),
    children: [...child1, ...child2],
  },
  ...parent2,
  ...parent3,
];

It does look a little bit more manageable and in my subjective opinion cleaner to work on.

What do you think, send me an email or connect with me on the links below!