Vite — Documentation | Vector Vesper

The `@` alias

Components install under the @/components/vv alias by default. Make sure @ resolves to your src directory in both vite.config and tsconfig.

vite.config.ts:

source

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: { "@": path.resolve(__dirname, "./src") },
  },
});

tsconfig.json:

source

JSON

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": { "@/*": ["./src/*"] }
  }
}

No SSR concerns

Vite apps are client-rendered, so you can import any component directly, including WebGL ones, with no dynamic(ssr:false):

source

TSX

import CodeRain from "@/components/vv/code-rain/CodeRain";

export default function App() {
  return <CodeRain />;
}

Tailwind CSS

If a component requires Tailwind, see the Tailwind CSS guide to set up your configuration.