cosmic-vue
v0.0.68
Published
Cosmic-vue is a implementation of cosmic, which is a meta component framework.
Downloads
33
Keywords
Readme
Cosmic Vue
Cosmic-vue is a implementation of cosmic, which is a meta component framework.
🚧ing...welcome to contribute!
Recommended IDE Setup
Setting Default UI
You should set resolve.alias
option in your vite.config.js or other build config, such as:
// vite.config.js
{
resolve: {
alias: {
'cosmic-ui': 'cosmic-ui-alpha', // default ui of cosmic
// 'cosmic-ui': resolve('../local-ui-folder'),
}
}
}
Import UI CSS
Default Cosmic UI packages provides the following:
.
├── dist
│ ├── style.css # CSS of all components
│ ├── variables.css # Design Tokens
│ ├── utilities.css # Default utilities class
│ ├── ui.css # Bundle CSS = style.css + variables.css + utilities.css
│ ├── index.es.js # exports of all css modules in es module
│ └── index.umd.js # exports of all css modules in umd
└── ...
Generally, you should import ui.css
in your project.
If you need to decide some design token yourself, you can import them separately:
@import 'cosmic-ui/style.css';
@import 'cosmic-ui/utilities.css';
@import './your-variables.css';
It is not necessary to import utilities.css
if using utility-first CSS framework (Windi Css / Tailwind CSS) in your project.
Replace UI for Component Instance
<script>
import { button, buttonRouned } from 'cosmic-ui';
import { buttonCustomed } from './button-customed.css';
</script>
<template>
<Button />
<Button :styles="button" />
<Button :styles="buttonRouned" />
<Button :styles="buttonCustomed" />
<template>