KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #typescript #developer-tools #claude-code #ai-agent #codex #deepseek-harness #ai-agents #cli #react #mcp

vite-graphql-setup

★ 33 Open GitHub ↗

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

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

## 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)

vite-graphql-setup

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README