Vite Graphql Setup

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.

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)