Origin

The fast web3 application toolkit ⚡️

status: WIP alpha warning 🐉

Motivation

Building modern web3 applications should be simple, elegant and fast. Origin is an attempt to solve that problem with a focus to promote best practices in a lightweight, opinionated base configuration.

Origin builds upon Vite 2 defaults with Vue 3 and Typescript, resulting in ESmodules served directly to the browser during development and < 100ms hot reloading time with preservation of application state between updates.

The production build uses rollup to generate an optimized output with relative paths so the compiled application will load via both root and subpath domains, suitable for deploying to IPFS and loading natively on the decentralized web.

We will extend the vite/rollup plugin architecture to provide a selection of essential web3 tools/apis for the purpose of plug and play integration with web3 wallets, storage, distributed identity along with other general ui/design productivity frameworks.

Core Features

Vite 2.x with Vue 3 & Typescript
Auto component importing (vite-plugin-components)
File based routing (vite-plugin-pages)
Layout sub-system (vite-plugin-vue-layouts)
PostCSS (postcss.config.js)
IPFS Base (auto gateway detection) ipfs-base
ESLint & Prettier (.eslintrc.js)
Server Side Page Generation vite-ssg
Metadata rendering with @vueuse/head
i18n //TODO
Markdown pages/imports //TODO

Testing

Playwright (e2e) //TODO

Vue Plugins

Pinia store with modules origin-plugin-pinia
Distributed identity provider //TODO #6
Offline first database //TODO

Vite Plugins

Tailwind 2.x //TODO

Development

# 0: install deps
npm i
# 1: start development mode
npm start

# production build /dist
npm run build

# preview production build /dist
npm run serve

Recommended Setup

VSCode + Volar + Vue devtools (beta)

This combo enables IDE support for <script setup> which is included in Vue v3.1.4. However, be sure to disable Vetur if you have it installed as these extensions conflict.

Type Support For `.vue` Imports in TS

If you are using Volar the default configuration included in Origin enables prop types for .vue imports. You can toggle this by selecting Volar: Switch TS Plugin on/off from the VSCode command palette.

jorishermans/storyline