Using path aliases in VuePress 2

[ricardobalk]

How does someone use aliases in VuePress 2?

I now am using:

import '../../../../../../components/SomeAwesomeComponent.vue';

but it would be much better to read and more maintainable if I could do:

import '@components/SomeAwesomeComponent.vue';

I have already tried to alter my tsconfig.json:

// src/tsconfig.json
{
  "extends": "../tsconfig.base.json",
  "include": [".vuepress/**/*"],
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components/*": [
        "./.vuepress/theme/components/*"
      ]
    }
  }
}

but am still getting the following error:

Module not found: Error: Can't resolve '@components/Page.vue'

Also tried to do things with configureWebpack and chainWebpack, but didn't find a solution. How do I set up my aliases?

---

Bonus points if someone could help me with aliases in Stylus as well. I am currently using the following approach in config.ts, Stylus resolves the files, but it does not look like a great solution.

// src/.vuepress/config.ts
const config: UserConfig<DefaultThemeOptions, WebpackBundlerOptions> = {
  /* ... */
  bundlerConfig: {
    stylus: {
      stylusOptions: {
        include: [path.resolve(__dirname, "theme", "styles")],
      },
    },
  },
  /* ... */

i.e. now @import 'grid/some-grid' instead of @import '../../../../grid/some-grid' works, but I'd like to have to use a tilde when using aliases: @import ~/grid/some-grid

[meteorlxy]

https://vuepress2.netlify.app/reference/plugin-api.html#alias