https://github.com/heywhy/vite-graphql-setup
This is a project template for Vue using Vite, GraphQL with VueApollo, Tailwindcss, Vue-Router, and Vue Testing Library
https://github.com/heywhy/vite-graphql-setup
graphql graphql-codegen graphql-support hooks mutations tailwind typescript vite vue-apollo vuejs
Last synced: 2 months ago
JSON representation
This is a project template for Vue using Vite, GraphQL with VueApollo, Tailwindcss, Vue-Router, and Vue Testing Library
- Host: GitHub
- URL: https://github.com/heywhy/vite-graphql-setup
- Owner: heywhy
- Created: 2020-12-13T20:47:59.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-04-23T17:46:03.000Z (about 3 years ago)
- Last Synced: 2025-04-17T13:32:13.362Z (2 months ago)
- Topics: graphql, graphql-codegen, graphql-support, hooks, mutations, tailwind, typescript, vite, vue-apollo, vuejs
- Language: TypeScript
- Homepage:
- Size: 727 KB
- Stars: 33
- Watchers: 4
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Description
This repository contains a basic setup for [Tailwind](https://tailwindcss.com/), [Vue 3](https://vuejs.org/) using [Vite](https://github.com/vitejs/vite) for bundling and also a basic structure for GraphQL support using [Vue Apollo](https://v4.apollo.vuejs.org/)
## Technologies
- [Tailwind](https://tailwindcss.com/)
- [Vue 3](https://vuejs.org/)
- [Vite](https://github.com/vitejs/vite)
- [Vue Router](https://router.vuejs.org/)
- [Typescript](https://www.typescriptlang.org/)
- [Vue Apollo](https://v4.apollo.vuejs.org/)
- [Apollo](https://www.apollographql.com/docs/)
- [GraphQL Codegen](https://graphql-code-generator.com/)
- [Yarn](https://yarnpkg.com/)
- [Testing Library](https://testing-library.com/docs/vue-testing-library/intro)
## Quality Controls
- [Prettier](https://prettier.io/)
- [Commitlint](http://commitlint.js.org/)
- [Husky](https://typicode.github.io/husky) & [Lintstaged](https://github.com/okonet/lint-staged) (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](https://vuejs.org/api/composition-api.html#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](https://graphql-code-generator.com/) 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](https://github.com/vitejs/vite) to give you an overview of how this folders (**/public/,/src/assets**) are used. |
## Recommended VSCode Extensions
- [Name: Apollo GraphQL](https://marketplace.visualstudio.com/items?itemName=apollographql.vscode-apollo)
- [Conventional Commits](https://marketplace.visualstudio.com/items?itemName=vivaxy.vscode-conventional-commits)
- [Cucumber (Gherkin) Full Support](https://marketplace.visualstudio.com/items?itemName=alexkrechik.cucumberautocomplete)
- [DotENV](https://marketplace.visualstudio.com/items?itemName=mikestead.dotenv)
- [EditorConfig for VS Code](https://marketplace.visualstudio.com/items?itemName=EditorConfig.EditorConfig)
- [PostCSS Language Support](https://marketplace.visualstudio.com/items?itemName=csstools.postcss)
- [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
- [Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur)
- [Vue Peek](https://marketplace.visualstudio.com/items?itemName=dariofuzinato.vue-peek)
## TODO
- [x] GraphQL testing support
- [ ] E2E using Cypress (Gherkins & Cucumber)