Guide · Open source

How to use vue2-happyfri: clone, run and read a Vue 2 + Vuex starter

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

vue2-happyfri is a small open-source example app built with Vue 2, Vue Router and Vuex. It is a beginner practice project that shows how these pieces fit together in one short project (MIT licensed, written in JavaScript). This guide walks you through running it locally and reading its router, store and entry file so you can see how a Vue app is organised.

vue2-happyfribailicangdu/vue2-happyfri · ★ 10.5k · MIT Install options & downloads

Quick start

1Check Node.js. Confirm you have Node.js 6.0 or later installed, plus npm or yarn.
2Clone the repository. Run git clone on the bailicangdu/vue2-happyfri repository and enter the folder.
3Install dependencies. Run npm install (or yarn) inside the project folder.
4Start the dev server. Run npm run dev and open localhost:8088 in your browser.
5Read the router. Open the router config to see how the home, item and score routes are declared.
6Read the store. Open the store, mutations and actions files to follow how answers and the question number change.

What vue2-happyfri is and who it is for

The README describes the project as a very simple vue2 + vuex project meant as an entry-level exercise. The code shows a multi-page quiz-style flow with routes for home, item and score pages.

It suits beginners learning Vue 2 basics, developers who want a small Vuex example to read, and students practising routing and state management. It is not a finished product, and it targets Vue 2 and older Node.js versions, so it is not a starting point for a new project today.

Install and run vue2-happyfri locally

You need Node.js 6.0 or later, as stated in the README, plus npm or yarn (the README recommends yarn). Clone the repository, move into the folder, install dependencies and start the local dev server, which the README says runs on localhost:8088.

Prerequisites: Node.js 6.0+ (per README), npm or yarn
Dev server address per README: localhost:8088

git clone https://github.com/bailicangdu/vue2-happyfri.git
cd vue2-happyfri
npm install
npm run dev

Build the project for release

The README lists a separate build command for the release environment. Run it after installing dependencies. The README does not describe where the output is written or how to deploy it, so check the project's build configuration for those details.

npm run build

Read the router configuration

The router file maps the root path to the App component, with three child routes: an empty path for the home page, /item and /score. Each page is loaded with require.ensure, which splits it into its own chunk for lazy loading. Start here to see how Vue Router nests pages under a shared layout.

'' loads the home page
/item loads the item page
/score loads the score page

path: '/item',
component: r => require.ensure([], () => r(require('../page/item')), 'item')

Understand the Vuex store: state, mutations and actions

The store holds state such as the current item number, elapsed time and recorded answers. Mutations are the only place state changes: ADD_ITEMNUM advances the question, REMBER_ANSWER records the chosen answer id, REMBER_TIME starts a timer and INITIALIZE_DATA resets values. Actions call commits; the addNum action records the answer and moves to the next question unless it is the last one.

Note that the source spells REMBER with that spelling, so keep it when searching the code.

state: level, itemNum, allTime, timer, itemDetail, answerid
mutations: ADD_ITEMNUM, REMBER_ANSWER, REMBER_TIME, INITIALIZE_DATA
actions: addNum, initializeData

addNum({ commit, state }, id) {
  commit('REMBER_ANSWER', id);
  if (state.itemNum < state.itemDetail.length) {
    commit('ADD_ITEMNUM', 1);
  }
}

See how the root instance connects everything

The entry file registers Vue Router and Vuex with Vue.use, creates the router from the route config and the store, then mounts a root Vue instance on the element with id app. This is the wiring that makes the router and store available to every component.

Vue.use(VueRouter)
const router = new VueRouter({ routes })
new Vue({ router, store }).$mount('#app')

What people use it for

Learning how a Vue 2 app is laid out with a router and a store
Reading a small Vuex example with state, mutations and actions
Practising routing between home, item and score pages
Using a simple quiz-style flow as a base for a classroom exercise

Frequently asked questions

Is vue2-happyfri free to use?

Yes. The project is licensed under MIT, as listed on its repository summary. You can read, copy and modify the code under that licence.

What do I need to run vue2-happyfri?

The README asks for Node.js 6.0 or later, plus npm or yarn. The author recommends yarn. Clone the repo, install dependencies and run npm run dev.

Does vue2-happyfri work with Vue 3?

No. The project is built on Vue 2, Vue Router and Vuex, so it does not show Vue 3 or current Vuex patterns. Use it to learn Vue 2 concepts, not as a Vue 3 reference.

Is vue2-happyfri production ready?

The README describes it as a beginner practice project, so it is not presented as a finished product. Do not rely on it for production features.

What port does the dev server use?

The README says npm run dev starts a local server at localhost:8088. Open that address in your browser after the server starts.

What are good alternatives to vue2-happyfri?

The README points to vue2-elm, a larger Vue 2 project that covers many Vue features. Other projects in the same space include vuex-examples and vue-todomvc-example.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Use vue2-happyfri if you are a beginner or student who wants a short Vue 2 project with Vue Router and Vuex to read and run locally. Pick something else if you are starting a new project, need Vue 3 or current Vuex patterns, or need production-ready features; the README's own recommendation for a larger Vue 2 example is vue2-elm.

Install options & downloads