vite-graphql-setup
vite-graphql-setup copied to clipboard
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
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_source: 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
- [x] GraphQL testing support
- [ ] E2E using Cypress (Gherkins & Cucumber)