Vuxel is a A lightweight, component-based UI framework for Roblox inspired by Vue.js, Vuxel introduces reactive state management, computed properties and component templating.
Key Features
- Component-Based Architecture: A template system that supports nested components and lifecycle hooks, inspired by Vue.js.
- Reactive State Management: Create and manage state variables that automatically update the UI.
- Computed Properties: Define dynamic properties that automatically recalculate based on other state values.
-
Built-In Animation Utilities: Easily animate UI elements using Vuxel’s
Tweenfunction, integrated withTweenService. - Global Reference Management: Store and retrieve references to UI components globally, simplifying interaction across components.
- CSS Styling: Re-created the CSS way of styling UI components with scoped, global and reusable class-based styles.
Exemples
A Simple Button 
A simple button displayed on the top left corner that prints “Button clicked!” when clicked.
local Vuxel = require(game.ReplicatedStorage.Vuxel)
local app = Vuxel.CreateApp(
Vuxel.Template(
{
Class = "TextButton",
Name = "MyButton",
Text = "Click me!",
Size = UDim2.new(0, 100, 0, 30),
BackgroundColor3 = Color3.new(0.2, 0.6, 0.8),
TextColor3 = Color3.new(1, 1, 1),
FontSize = Enum.FontSize.Size18,
Events = {
MouseButton1Click = function()
print("Button clicked!")
end
}
}
)
)
Counter Application
This simple counter application showcases how to use reactive states (State) and event handling (Event) to create a dynamic UI component. When the button is clicked, the counter value is incremented and automatically updates the display.
local Vuxel = require(game.ReplicatedStorage.Vuxel)
-- Define reactive state
local counter = Vuxel.State.new(0)
local app = Vuxel.CreateApp(
Vuxel.Template(
{
Class = "Frame",
Size = UDim2.new(1, 0, 1, 0),
Children = {
{
Class = "TextLabel",
Name = "CounterLabel",
Text = Vuxel.Utility.Computed(function()
return "Count: " .. counter:Get()
end, counter),
Size = UDim2.new(0.6, 0, 0.4, 0),
Position = UDim2.new(0.2, 0, 0.2, 0),
TextSize = 24
},
{
Class = "TextButton",
Name = "IncrementButton",
Text = "Increment",
Size = UDim2.new(0.4, 0, 0.2, 0),
Position = UDim2.new(0.3, 0, 0.7, 0),
BackgroundColor3 = Color3.fromRGB(100, 200, 100),
TextSize = 18,
Events = {
MouseButton1Click = function()
counter:Set(counter:Get() + 1)
end
}
}
}
}
)
)
