vide/docs/index.md
2024-10-28 20:08:31 +01:00

78 lines
1.6 KiB
Markdown

---
# https://vitepress.dev/reference/default-theme-home-page
layout: home
next:
text: 'Introduction'
link: '/tut/crash-course/1-introduction'
hero:
name: Vide
text: ""
tagline: A reactive UI and state library for Luau.
image:
src: /logo.svg
alt: Vide
actions:
- theme: brand
text: Quick Start
link: /tut/crash-course/1-introduction
- theme: alt
text: API Reference
link: /api/reactivity-core
features:
- title: Reactively driven
details: Powerful and modern primitives inspired by SolidJS to build fluid UI with little friction
- title: Declarative and concise
details: Syntax built to be minimal and clean while also obvious and easy to understand to anyone
- title: Fully Luau Typecheckable
details: Ensure you write correct and robust code through the Luau typechecking engine.
---
## Installation
Vide can be installed through 3 different ways.
:::tabs
== Wally
Add the following line to your `wally.toml` and then re-install your packages
```toml
[dependencies]
vide = centau/vide@0.3.1
```
== Roblox
im so sorry you have to use rojo and build it yourself or ask someone in ross to build a vide rbxm for you :sob:
cen is too busy working on system verilog
:::
## Quick Examples
A simple counter element that counts up when you click on it.
```luau
local vide = require("vide")
local source = vide.source
local create = vide.create
local function Counter()
local count = source(0)
return create "TextButton" {
Size = UDim2.fromOffset(200, 50),
Text = function()
return `count: {count()}`
end,
Activated = function()
count(count() + 1)
end
}
end
return Counter
```