DEV Community

Cover image for Vitriol: Mithril+Vite
Dominic Jean
Dominic Jean

Posted on • Edited on

Vitriol: Mithril+Vite

#vite #mithril #ionic #typescript

⚡ Setting Up Mithril + Vite Using Vitriol

Vitriol is a lightweight npm package that integrates Mithril with Vite and Ionic Framework, enabling fast and modern frontend development.

🛠 Prerequisites

Make sure you have the following before starting:

  • Node.js and npm installed
  • Your preferred code editor
  • Basic knowledge of JavaScript and Mithril

🚀 Step 1: Create Your Project with Vitriol 

npm create vitriol@latest
Enter fullscreen mode Exit fullscreen mode

If you're using Vitriol for the first time, npm will prompt you to install the package.

🧩 Step 2: Configure Project Setup

You’ll be asked to choose:

  • Project type: JSX or Standard
  • Language: JavaScript or TypeScript
  • Project name (default is vitriol-project)
  • Whether to include the Ionic Framework (we recommend including it for this demo)
  • Add devcontainer.json configuration? This option lets you set up a Development Container for seamless coding in environments like GitHub Codespaces or VS Code Remote. Choose Yes if you want to enable this feature.

📌 If you use a custom project name, replace vitriol-project in subsequent steps with your chosen name.

Alternatively, you can use command-line arguments to skip prompts:

# Example: Create a TypeScript project with Standard syntax
npm create vitriol@latest my-app -- --standard --ts
Enter fullscreen mode Exit fullscreen mode

📦 Step 3: Install Dependencies 

cd vitriol-project
npm install
Enter fullscreen mode Exit fullscreen mode

Wait until installation completes.

🌐 Step 4: Start Development Server 

npm run dev
Enter fullscreen mode Exit fullscreen mode

Then open the URL displayed in your terminal to see your running app in the browser.

🔧 Step 5: Explore and Update the App

The source files are in the /src folder.

  • main.js (or main.ts) sets up components and Mithril routes automatically
  • All .js, .jsx, .ts, or .tsx files inside /pages are auto-registered as routes
  • Access pages via URLs like /#/pagename or programmatically with m.route.set("/pagename")

✅ Step 6: Automate Testing with Vitest

Tests live in the /test folder.

To run them:

npm run test
Enter fullscreen mode Exit fullscreen mode

📦 Step 7: Build for Production 

npm run build
Enter fullscreen mode Exit fullscreen mode
  • The build output is placed in the /dist directory 
npm run preview
Enter fullscreen mode Exit fullscreen mode
  • To test your production-ready files locally before deploying

Top comments (1)

Collapse
 
artydev profile image
artydev •

Great thank you :-)