Description
Vumdoc is a document UI framework module that aims to be a modern and very sophisticated document UI framework
Getting Started
1. Setup Project
Create your project in Vite or Turbopack!
2. Install Package
Go to the project directory and install this module
npm i @vumdoc/core
yarn add @vumdoc/core
pnpm add @vumdoc/core
3. Import Package
Import this module in the file that initializes the framework, etc.
// Vite + React
// src/main.ts
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.tsx";
import "./index.css";
// Add ↓
import "@vumdoc/core";
// Add ↑
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// Vite + Vue
// src/main.ts
import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
// Add ↓
import "@vumdoc/core";
// Add ↑
createApp(App).mount("#app");
4. Use!
It can be used in .html
, .vue
, or .tsx
by writing <vum-[name]></vum-[name]>
.
Check the documentation for details.
// Vite + React
// src/App.tsx
import { useState } from "react";
const App = () => {
const [count, setCount] = useState(0);
return (
<>
<vum-button onClick={() => setCount((count) => count + 1)}>
count is {count}
</vum-button>
</>
);
};
export default App;
<script setup lang="ts">
// Vite + Vue
// src/App.vue
import { ref } from "vue";
const count = ref(0);
</script>
<template>
<vum-button @click="count++">count is {{ count }}</vum-button>
</template>
<style scoped></style>