Vue 3 + Apollo + Quasar starter kit

This starter kit features Vue 3, Quasar and Apollo.

Table of Contents

• Overview
  • Tech Stack
  • Included Tooling
  • Example Components
• Installation
  • CLI
  • Manual
• Commands
• Demo Implementation

Overview

Tech Stack

• Vue 3
• Quasar
• Apollo (Vue Apollo)

Included Tooling

• Jest - Test runner
• TypeScript - Type checking
• Storybook - Component library
• ESLint - Code linting
• Prettier - Code formatting

Example Components

File structure

We use multiple files to implement this:

• .vue files contain the Vue component (along with its custom CSS whenever applicable and scripts)
• .spec.ts files are optional files that contain automated tests for the component. These tests are written to work with Karma and Jasmine.
• .stories.js|ts files are optional files containing stories for the component. These files help us visualize the different states the component can have in Storybook.

This kit includes 2 components to demonstrate how you can best utilize this kit and its technologies:

• Greeting component FetchMessage located in src/components/FetchMessage/FetchMessage.vue that uses Vue Apollo to fetch data from the example hello endpoint.

  • Utilizes Vue Apollo to retrieve data from the GraphQL endpoint located at https://api.starter.dev/graphql
  • The unit test for the FetchMessage component can be found in tests/unit/FetchMessage.spec.ts. The tests check that the component:
    • Mounts to the DOM
    • Fetches data from the given GraphQL endpoint
    • Displays the data fetched from the GraphQL endpoint

• Counter component NumberCounter located in src/components/NumberCounter/NumberCounter.vue

  • The unit test for the NumberCounter component can be found in tests/unit/NumberCounter.spec.ts. The test checks that the component:
    • Has an increment button
    • Has a decrement button
    • Has a reset button
    • Displays a counter value that starts at 0
    • Increments the counter value by 1 when the increment button is clicked
    • Decrements the counter value by 1 when the increment button is clicked
    • Resets the value of the counter to 0 when the reset button is clicked

CLI (Recommended)

npm create @this-dot/starter -- --kit vue3-apollo-quasar

yarn create @this-dot/starter --kit vue3-apollo-quasar

• Follow the prompts to select the vue3-apollo-quasar kit and name your new project.
• cd into your project directory and run yarn or npm install.
• Run yarn dev to start the development server.
• Open your browser to http://localhost:8080 to see the included example code running.

Manual

git clone https://github.com/thisdot/starter.dev.git

• Copy and rename the starters/vue3-apollo-quasar directory to the name of your new project.
• cd into your project directory and run yarn or npm install.
• Run yarn dev to start the development server.
• Open your browser to http://localhost:8080 to see the included example code running.

Commands

Install the dependencies

yarn
# or
npm install

Start the app in development mode (hot-code reloading, error reporting, etc.)

yarn dev
# or
npm run dev

Lint the files

yarn lint
# or
npm run lint

Format the files

yarn format
# or
npm run format

Build the app for production

yarn build
# or
npm run build

Customize the configuration

See Configuring quasar.config.js.

Demo Implementation

Repository Live Application