Question about aliases

[CarlosKVillanueva]

Hey all, Im working on an old rails project where we have vite a vue for some pages. Out sourceCodeDir is app/javascript (becasue we have all vue code previous to vite installation on that folder)

We decided to add Inertia to our Rails project, since it has a different structure than the plain old SPA, makes sense to have a new folder so I added app/frontend to put there, every new Inertia/Vue pages

My question. is there a way to alias app/frontend to make assets import and management more dev friendly?
IDK for example #/Pages/Model/Action.vue and avoid imports like ../../../../

Sorry if this was a topic somewhere, I couldn't find it in docs nor issues.

Thanks in advance!

[ElMassimo]

Hi Carlos.

The resolve.alias configuration option in Vite is the way to define your own aliases.

In your case, if you configured sourceCodeDir to be app/frontend, then ~/Pages/Model/Action.vue would be available instead of having to use relative imports.

This is covered briefly in Import Aliases, and in more detail in the Migration Guide.

[CarlosKVillanueva]

Thank you @ElMassimo for your response, I have seted the sourceCodeDir to app/javascript due to legacy code that we have there, now we want to make app/frontend the directory for all new code, at least, until we migrate all the legacy code.

I manage alias to alias app/frontend to # like this.

const sourceCodeDir = "app/frontend"

export default defineConfig({
 resolve: {
   alias: {
     "#": path.resolve(__dirname, sourceCodeDir)
   }
 },

And this works just fine for components, but I also installed @js-from-routes/client and when I import the routes file with the # (import matchesApi from "#/api/MatchesApi.js";) it works fine, but I lose code completion. but if I changed to ../../ (import matchesApi from "../../api/MatchesApi.js";) import sintax, everything works just fine. Do you know what could be the problem?

[ElMassimo]

Your editor might not have information on how to resolve #.

Check your editor's documentation to find out how you can provide that information.

For example, with a tsconfig.json or a jsconfig.json placed inside app/frontend:

  "compilerOptions": {
    "paths": {
      "#/*": ["./*"],
    },

Remember to restart your editor after configuring these.

[CarlosKVillanueva]

Thanks you so much @ElMassimo, that was the solution to my issue!!