Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hope-ag/vue-school
https://github.com/hope-ag/vue-school
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/hope-ag/vue-school
- Owner: hope-ag
- Created: 2024-03-26T08:31:23.000Z (10 months ago)
- Default Branch: main
- Last Pushed: 2024-09-15T21:21:30.000Z (4 months ago)
- Last Synced: 2024-09-15T23:33:57.420Z (4 months ago)
- Language: Vue
- Size: 7.04 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Blazingly fast(speed)
See the
Live Version
## Features
- ⚡️ [Nuxt 3](https://github.com/vuejs/core), [pnpm](https://pnpm.io/), [TailwindCSS](https://tailwindcss.com/), [Sanity CMS](https://www.sanity.io/), [ESLint](https://eslint.org/), [Prettier](https://prettier.io/)
- 🦾 TypeScript
- Blazingly fast and well optimized
## Starting the project
### Prerequisites
- A [sanity.io](https://www.sanity.io/) account.
- The [sanity cli](https://www.sanity.io/docs/cli).
- [NodeJS](https://nodejs.org) - Tested on version 18.19.0 and NPM version 10.2.3
### Steps
1. Sign into your [sanity.io](https://www.sanity.io/) account and created a project if you don't already have one. Copy the project Id up top. Switch to the Datasets tab and copy the mane of the dataset you want to use. For this test, I'm using "production".
2. Go tho the api section of your [sanity.io](https://www.sanity.io/) dashboard and add `http:localhost:3000` to the list of CORS origins. This will prevent the nuxt app from being blocked by CORS when making a request to sanity. If you're going to host the app, ensure the domain is also added to the allowed origins.
2. Clone the github project . This will create a `vue-school` folder in your current directory. Open it in your preferred text editor or IDE.
```bash
git clone [email protected]:hope-ag/vue-school.gitcd vue-school
git checkout tailwind-design
```3. Create a copy of [`env.example`](./env.example) and rename it to .env. Open the new [`.env`](./.env) and replace the following values: `YOUR_PROJECT_ID` - the project id from your sanity dashboard; `YOUR_DATASET` - the dataset from your sanity dashboard.
4. Open [`sanity/sanity.config.ts`](./sanity/sanity.config.ts) and [`sanity/sanity.cli.ts`](./sanity/sanity.cli.ts) and in each file, replace the following values: `YOUR_PROJECT_ID` - the project id from your sanity dashboard; `YOUR_DATASET` - the dataset from your sanity dashboard.
5. Open a terminal and install the nuxt project dependencies:
```bash
# npm
npm i# pnpm
pnpm i# yarn
yarn
```6. Install the sanity cli, if you haven't already done so and authenticate:
```bash
# npm
npm install --global @sanity/cli# yarn
yarn global add @sanity/cli# pnpm
pnpm install --global @sanity/cli# sanity login
sanity login
```7. Open a terminal and switch to the sanity folder with `cd sanity`. Install the dependencies:
```bash
# npm
npm i# pnpm
pnpm i# yarn
yarn
```
At this point, you should be all set and ready to run the project.
From your terminal in the sanity directory, import the site data into your sanity dataset by running the following command. Replace `YOUR_DATASET` with the name of your dataset
```bash
sanity dataset import dataset.gz YOUR_DATASET
```With the dataset imported, you can now start the project. Navigate to the project root by running `cd ..` from the sanity folder. Then start the development server on http://localhost:3000:
```bash
# npm
npm run dev# pnpm
pnpm run dev# yarn
yarn dev
```
## Updating content with sanity studio
A full recording of the guide can be found [here](https://assets.h3a.dev/vs-guide.mp4). In the video, http://localhost:3000 was not added to the allowed origins, remember to add it (check step 2) to prevent errors.