Start by creating a new Vue project using vite. Select the Vue + TypeScript template:
Replace everything insrc/index.csswith the following:
@import "tailwindcss";
The current version of Vite splits TypeScript configuration into three files, two of which need to be edited. Add thebaseUrlandpathsproperties to thecompilerOptionssection of thetsconfig.jsonandtsconfig.app.jsonfiles:
{
"files": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.node.json"
}
],
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}
Add the following code to thetsconfig.app.jsonfile to resolve paths, for your IDE:
{
"compilerOptions": {
// ...
"baseUrl": ".",
"paths": {
"@/*": [
"./src/*"
]
}
// ...
}
}
Add the following code to the vite.config.ts so your app can resolve paths without error:
import path from "path"
import tailwindcss from "@tailwindcss/vite"
import vue from "@vitejs/plugin-vue"
import { defineConfig } from "vite"
// https://vite.dev/config/
export default defineConfig({
plugins: [vue(), tailwindcss()],
resolve: {
alias: {
"@": path.resolve(__dirname, "./src"),
},
},
})
The fastest way. It writes each component plus everything that component imports, then installs the packages they need.
npx @left4code/cosmic-ui-cli@latest init
Then add components. Dependencies between components are resolved for you, so this also writes button, frame, portal and presence.
npx @left4code/cosmic-ui-cli@latest add dialog
Run npx @left4code/cosmic-ui-cli@latest list to see everything available. The steps below are the manual alternative.
You can now start adding components to your project.
<script setup lang="ts">
import Button from "@/components/ui/button.vue";
</script>
<template>
<div class="flex min-h-svh flex-col items-center justify-center">
<Button variant="success">Button</Button>
</div>
</template>