Melon is a Nuxt.js starter template for creative development that pre-bundles Three.js, Pixi.js, i18n, Stylus, and Vuex, so you can build interactive, server-rendered web experiences without wiring each library yourself.
What is Melon?
Melon is an open-source starter project built on Nuxt.js, a framework that provides server-side rendering for Vue.js applications. It takes a blank Nuxt project and adds the libraries most commonly needed for creative coding, along with useful NPM scripts. Running it requires npm; after cloning, npm install installs dependencies, and npm run dev starts a development server on localhost:3000 with hot reloading. The starter was created by Antoine Abbou, and a live demo is hosted at melon.antoineabbou.fr.
Key Features
- Nuxt.js foundation — Leverages Nuxt.js to manage routing, server-side rendering, middleware, and asynchronous data, removing the need to configure these manually.
- Three.js integration — Comes with Three.js for building 3D scenes, custom shaders, and WebGL interactions directly in Vue components.
- Pixi.js integration — Includes Pixi.js for high-performance 2D rendering, sprites, and canvas animations.
- i18n internationalization — Pre-configures the i18n package so you can add multiple languages to your project without extra setup.
- Stylus styling — Uses Stylus as the CSS preprocessor, with
.stylsupport ready to use. - Vuex state management — Wires up Vuex so you can manage global application state from the start.
- Production scripts — Provides
npm run buildto minify JS/CSS,npm run startto launch the built app, andnpm run generateto export all routes as static HTML files for hosting on any static file server. - Demo and documentation — Includes a link to a live demo and points to the Nuxt.js documentation for further learning.
Who is it for?
- Creative developers who want a ready-made environment for WebGL experiments with Three.js or 2D canvas work with Pixi.js, without spending time on boilerplate.
- Prototypers who need a fast way to scaffold a server-rendered Vue site with internationalization and a preconfigured store for a concept or MVP.
- Designers exploring Vue who want to learn Nuxt.js by examining a small, working starter with a clean structure.
What can you do with Melon?
- Build an interactive 3D landing page — Use the included Three.js setup to render 3D models and effects, then deploy the generated static output.
- Create a portfolio with animated 2D visuals — Leverage Pixi.js to build particle effects or sprite animations, and serve the site via
npm run generateas static HTML. - Launch a multilingual website — The i18n integration lets you add locale files and switch languages, all within the Nuxt routing system.
How does Melon work?
Clone the repository, run npm install from the project root, and then npm run dev starts the development server. For production, npm run build compiles and minifies the app, npm run start serves it in production mode, and npm run generate exports every route as an HTML file for static hosting. Detailed explanations of each Nuxt command are available in the official Nuxt.js documentation.
