Skip to content
Get packs

vue2-happyfri

A small beginner Vue 2 project showing Vue Router and Vuex working together.

GitHub Download source
Stars
10.5k
Forks
2.8k
Licence
MIT
Language
JavaScript
Last update
3.7 years ago
Type
Learning resource

No commits in over a year — check for forks or alternatives before adopting.

What it is

This is a simple example app built with Vue 2, Vue Router and Vuex, meant to show how these pieces fit together in one small project. The README describes it as a beginner practice project, and the code shows a multi-page quiz-style flow with routes for home, item and score pages. It is useful for learning how a Vue app is structured, not as a finished product.

  • Read the router configuration to see how nested routes are defined
  • Study the Vuex actions and mutations to see how state changes are organized
  • Run the dev server locally and click through the demo flow
  • Use it as a starting point for your own small Vue 2 exercise

Great for

  • Beginners learning Vue 2 basics
  • Developers who want a small Vuex example to read through
  • Students practicing routing and state management in a small app

Not ideal for

  • Teams starting a new project today, since it uses Vue 2 and the README targets older Node.js versions
  • Anyone needing production features, because the README only describes it as a practice project
  • Developers wanting Vue 3 or current Vuex patterns, since this project is Vue 2 based
Step-by-step guide: how to use vue2-happyfriInstall, first run, examples, tips and FAQs

How to get it

  1. 1

    Clone and build from source

    You'll need: Node.js 6.0+ (per README) · npm or yarn

    Clone the repository

    git clone https://github.com/bailicangdu/vue2-happyfri.git

    Enter the folder

    cd vue2-happyfri

    Install dependencies

    npm install

    Start the local dev server

    npm run dev
  2. 2

    Run it

    • Clone the repository and enter the folder
    • Install dependencies with npm install (yarn is recommended in the README)
    • Run npm run dev to start the local server at localhost:8088
    • Open localhost:8088 in a browser to see the app
  3. 3

    Get the most out of it

    • Read the router file to see how nested routes load page components
    • Trace the addNum action and mutations to see how answers and the question counter update
    • Compare the store setup with the Vuex docs to understand each part
    • Follow the README link to vue2-elm for a larger Vue 2 project covering more features

Downloads

Source code (.zip)master branch · straight from GitHub

Strengths

  • Small enough to read in one sitting
  • Covers router, store and mutations in one place
  • MIT licensed and free to modify

Trade-offs

  • Built on Vue 2 and an older Node.js setup described in the README
  • README is short and mostly in Chinese, with limited explanation
  • Last push was in March 2023, so it may not reflect current tooling

How it compares

ProjectStarsTypeLevelUpdatedBest for
vue2-happyfri (this)10.5kLearning resourcebeginner3.7 years agoBeginners learning Vue 2 basics
fe-interview26.3kLearning resourcebeginner1.0 years agoFront-end developers preparing for job interviews
electron-vue15.3kLearning resourceintermediate4.8 years agoDevelopers who already know Vue and want to build a desktop app
vue212kLibraryintermediate2.1 years agoMaintaining an existing Vue 2 application that cannot yet be upgraded
storybook91.4kDev toolintermediate4 days agoFrontend teams building a shared component library or design system
vue-element-admin90.1kOtherintermediate2.0 years agoDevelopers building internal admin dashboards in Vue

Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.