This is a sample quiz application built using Vue 3 in Vite. It mainly uses Composition API to implement route views and components. Trivia questions are now generated using Open Trivia DB API(OpenTDB).

This is purely a coding exercise meant to refresh my knowledge of Vue.

From the last time I tried Vue, there seems to be significant changes in how things are done that made some developers upset.

Browsing through my old Vue projects from 2 years ago, there are many things that I already forgot so that means I can start using Vue 3 without any apprehension.

I will be using the following modules:

• Pinia 2, for global app state management
• Vue Router 4, for router

At this point, I have not made my mind yet on how to best implement a quiz app. Perhaps a simple SPA would suffice and there is no need for a router. But since this is more of a refresher for Vue, using as many standard modules is probably better for practice.

I mainly reused the generated code, files and styling from the build setup using Vite such that my Pinia store is still named as counter.js.

I am now fetching the quiz data from Open Trivia DB API. It is completely free and does not require API key.

You can adjust the number of questions shown by editing the API call's amount parameter.

const response = await fetch("https://opentdb.com/api.php?amount=10&type=multiple")

See function getRemoteData() from ./lib/utils.js.

If you want to prepare your own questions, edit /assets/questions.json for the quiz data and set the variable VITE_APP_USE_LOCALDATA from the .env file to true. You can also set VITE_APP_SHUFFLE_ALWAYS to true if you want to shuffle the questions every time you start the quiz. Otherwise, it will shuffle once a day. However, this only controls the local mode. For remote data, it is always shuffled.

It is not difficult to convert one to the other. It also seems that I can combine both (is it?). The main problem I encounter trying to convert my code to Composition API is that I need to scour the internet outside the documentation itself in order to fully implement Composition API for components and router.

Clone the repository and install the dependencies

$ git clone https://github.com/supershaneski/vue-quiz-app.git myproject

$ cd myproject

$ npm install

$ npm start

Open your browser to http://localhost:5173/ to load the application page.

See Vite Configuration Reference.

npm run build

npm run lint