GitHub Discovery

Discover GitHub through GraphQL with Vue3 and ViteJs

Technologies used

• ⚡️ ViteJs with Vue3

• 🎨 TailwindCss and Sass

• 🛣 Vue-Router

• 🚀 Vue Apollo GraphQL

• 🔥 Auto import components

• 🎇 Svg Loader

• 🦾 TypeScript

Table of Contents

• 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

Vue 3 + Typescript + Vite

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

Recommended IDE Setup

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

If Using <script setup>

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

Type Support For .vue Imports in TS

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:

If Using Volar

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

If Using Vetur

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"

Project setup

$ npm run install

🤖  Create Github token

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.

⚙️  Setup environment variables

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

🖲  Commands line

Compiling and enabling hot-reloads for development

$ npm run dev

Lints and fixes files

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

Icons

The project has been setup to support SVG icons.

Import icon in component

SVG icons can be imported directly into a component :

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