heywhy / vite-graphql-setup

This is a project template for Vue using Vite, GraphQL with VueApollo, Tailwindcss, Vue-Router, and Vue Testing Library

Description

This repository contains a basic setup for Tailwind, Vue 3 using Vite for bundling and also a basic structure for GraphQL support using Vue Apollo

Technologies

• Tailwind
• Vue 3
• Vite
• Vue Router
• Typescript
• Vue Apollo
• Apollo
• GraphQL Codegen
• Yarn
• Testing Library

Quality Controls

• Prettier
• Commitlint
• Husky & Lintstaged (to help keep the quality workflow seamless)

Scripts

• build: build codebase for deployment.
• codegen: generate typescript types from GraphQL api.
• dev: run project in dev mode.
• prettier:check: check codebase for files not formatted.
• prettier:write: format the codebase.
• test: runs tests defined in tests and _test_ folder in the project.
• test:coverage: runs tests with coverage report.

Folder Structure

src/css

Applications stylesheets should be placed here.

src/components

Reusable components used throughout the application should be situated here.

src/hooks

You should place your application hooks in this folder with the advent of Composition API in Vue 3.

src/pages

This folder contains your application pages.

src/graphql

This folder contains everything regarding the graphql setup, queries, mutations and also files generated by GraphQL Codegen when you run yarn codegen

src/graphql/queries

Queries for each GraphQL types should be placed in here. Example, your GraphQL API has a User type and you need to write queries for that type, you should create a corresponding file user.ts and write your queries in the file/module.

src/graphql/mutations

The same convention that exists for GraphQL queries should be used for mutations also.

ℹ️ Information
You should read up on Vite to give you an overview of how this folders (/public/,/src/assets) are used.

Recommended VSCode Extensions

• Name: Apollo GraphQL
• Conventional Commits
• Cucumber (Gherkin) Full Support
• DotENV
• EditorConfig for VS Code
• PostCSS Language Support
• Tailwind CSS IntelliSense
• Vetur
• Vue Peek

TODO

• GraphQL testing support
• E2E using Cypress (Gherkins & Cucumber)