diff --git a/content/docs/reference/config.mdx b/content/docs/reference/config.mdx index a29a93bd3..c3e98e2ad 100644 --- a/content/docs/reference/config.mdx +++ b/content/docs/reference/config.mdx @@ -56,3 +56,37 @@ export default defineConfig({ In this example, the TinaCMS admin will be viewable at `/admin/index.html`. For more information [check out the content modeling section](/docs/schema/). + + +## Typescript Path Alias + +TinaCMS supports TypeScript path aliases in the `tina/config.{ts,js,tsx}` file and collections, making it easier to organize and maintain your code. + +##### Use alias in tina/config.{ts,js,tsx} + +Ensure that `tsconfig.json` exists at the root of your project. Define your aliases in the `compilerOptions` section: + +```json +{ + "compilerOptions": { + "baseUrl": ".", + "paths": { + "@/*": ["src/*"] + } + } +} +``` + +Figure: Your defined `tsconfig.json` + +You can now import utilities or other modules using the aliases: + +```typescript +import { someUtility } from '@/lib/utils'; + +export default defineConfig({ + .... +}) +``` + +Figure: Using aliases in `tina/config.{ts,js,tsx}`