cosmic-vue v0.0.68
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>
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago