Discover GitHub through GraphQL with Vue3 and ViteJs

• ⚡️ ViteJs with Vue3

• 🎨 TailwindCss and Sass

• 🛣 Vue-Router

• 🚀 Vue Apollo GraphQL

• 🔥 Auto import components

• 🎇 Svg Loader

• 🦾 TypeScript

• Vue 3 + Typescript + Vite
  • Recommended IDE Setup
    • If Using <script setup>
  • Type Support For .vue Imports in TS
    • If Using Volar
    • If Using Vetur
  • Project setup
    • 🤖  Create Github token
    • ⚙️  Setup environment variables
    • 🖲  Commands line
      • Compiling and enabling hot-reloads for development
      • Lints and fixes files
  • Icons
    • Import icon in component

This template should help get you started developing with Vue 3 and Typescript in Vite.

VSCode + Vetur. Make sure to enable vetur.experimental.templateInterpolationService in settings!

<script setup> is a feature that is currently in RFC stage. To get proper IDE support for the syntax, use Volar instead of Vetur (and disable Vetur).

Since TypeScript cannot handle type information for .vue imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in .vue imports (for example to get props validation when using manual h(...) calls), you can use the following:

Run Volar: Switch TS Plugin on/off from VSCode command palette.

1. Install and add @vuedx/typescript-plugin-vue to the plugins section in tsconfig.json
2. Delete src/shims-vue.d.ts as it is no longer needed to provide module info to Typescript
3. Open src/main.ts in VSCode
4. Open the VSCode command palette
5. Search and run "Select TypeScript version" -> "Use workspace version"

$ npm run install

To communicate with the GraphQL server, you'll need an OAuth token with the right scopes.

Follow the steps in "Creating a personal access token" to create a token. The scopes you require depends on the type of data you're trying to request. For this project, you mainly need to have Repository scopes. For example, select the User scopes to request user data.

Before executing anything, please create a .env file using the env.d.ts file as a schema (ask any front-end developer for the actual variable values).

$ npm run dev

$ npm run lint
$ npm run lint:fix
$ npm run prettier:fix

The project has been setup to support SVG icons.

SVG icons can be imported directly into a component :

import IconTag from '@/assets/svg/tag.svg?component';