Somewhere around here, there should be some wise summary on what GitHub Showcases is actually about. Well... If not, please check out the base repository's readme.
This is the VueJS 3, Typescript and quasar implementation of the github showcases. A demo for this version of the application can be found at vue3-apollo-quasar.starter.dev
- Vue 3 - A progressive frontend framework.
- GraphQL with Apollo - We use this for fetching data from the GitHub GraphQL API and it allows us to only retrieve the information we want at any given point in time.
- Typescript - TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.
- Quasar 2.x - A Vue.js based framework, which allows you as a web developer to quickly create responsive websites/apps in many flavours. It also contains several ready-made UI components that accelerate the development of this project.
- Yarn - We'll be using this to manage our dependencies.
Before being able to run this project, you will need to have a few things installed
- NodeJS v16.x and above - You can install this via the official website bute we'd recommend using a tool like NVM to be able to install multiple versions of node locally at the same time.
It is worth noting that installing NodeJS will also install
npmwhich we shall use to installyarnin the next step.
-
Yarn - Our package manager of choice
- You can install yarn using the following command once you have NodeJS installed.
npm install --global yarn
And... That's it! Once you have these down, you're ready to get this up and running.
Please note that the project is setup as a mono-repo, which means that the different versions of GitHub showcases using different technologies each belong in a separate directory in the root directory of the project.
Clone this project by running
git clone https://github.com/thisdot/starter.dev-github-showcases.git
Once cloned, enter the project directory like so
cd .\starter.dev-github-showcases\vue3-ts-quasar
For more information on how the Vue3 + TS + Quasar version of the project is structured, please refer to the contribution guide
Run this command in your command line while in the vue3-ts-quasar/ directory of the project to install dependencies.
yarn install
To run storybook, use the following command in your command line
yarn storybook
You can then access your storybook via localhost:6006/
Initially storybook was not working with the default scaffolded application
The issue was with some dependencies like style-loader, sass-loader and css-loader. The recent versions don’t work with vue2 and 3.
so these are the versions that worked:
"sass-loader": "^10.0.2",
"style-loader": "^1.3.0",
"css-loader": "^4.3.0",
Also another dependency @storybook/preset-scss is required which is to be added in the “addons” array in the main.js file inside the .storybook/ directory after successfully installing it using yarn.
To run your application, use the following command in your command line
yarn serve
You can then access your application via localhost:8080/
Congrats! You're in.
We use ESLint for linting and Prettier for formatting the code in this codebase. To run the linter, use the following command:
yarn lint
The unit tests for this application are written in Jest and can be run using the following command:
yarn test:unit
To deploy the application, you will first need to build it. You can build it using the following command:
yarn build
Your built application files will reside in dist/spa/ in your root vue3-ts-quasar directory.
Ensure the svg is saved in the public folder and attach an id to the svg.
<q-icon name="svguse:iconName.svg#svgid" />you can learn more about svg use from here.
also another dependency @storybook/preset-scss is required which is to be added in the “addons” array in the main.js file inside the .storybook folder after successfully installing it using yarn or npm.
If you would like to contribute to this project, great! We're glad to have you here.
You can check out the contribution guide to understand what technologies are used as well as how the project is structured and how you can contribute.
The Quasar Logo is licensed under a Creative Commons Attribution 4.0 International License by Emanuele Bertoldi.
This demo app gets deployed to Netlify on changes to the main branch.