This is a Nuxt 3 news site demo.
| Item | Link |
|---|---|
| Animation | AOS |
| API | The Guardian |
| CSS | UnoCSS, sanitize.css |
| Formatter | Prettier |
| Framework | Nuxt |
| Hosting | Netlify |
| Icon | Feather Icon |
| Lazy loading | Vue Lazyload |
| Link catcher | Nuxt 3 Interpolation |
| Linter | ESLint |
| Loading indicator | NProgress |
| Store | Pinia |
| Utilities | VueUse |
-
Clone this repo.
git clone https://github.com/yasminzy/enlightenment-news.git
-
Install the packages.
pnpm i --shamefully-hoist
-
Register for a developer key. Copy the API key.
-
Create a
.envfile in the project root and paste the key there.GUARDIAN_API_KEY=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
-
Start the development or generate the pages for production.
# Development pnpm dev # Production pnpm generate
The homepage is in index.vue. There are 2 sections: featured (components/HomeFeatured.vue) and top-rated (components/HomeTopRated.vue). Both use the store (stores/home.js).
The search page is in search/. The index.vue one only shows the search box (components/SearchBox.vue), which uses the store as well (stores/search.js). When performing a search, we will get to the [query].vue one.
The [id].vue is for the article. It is dynamic, like [section].vue and [tag].vue, but it is prioritized. It means that if it is not clear which one is the right place for the content, e.g. when refreshing the page, we will be pointed to [id].
In [id], we check if it is a section or tags page. We will go there if that is the case. And if the content is not accessible with our developer key, the page will be redirected to the original page on The Guardian website.
We catch the links to another The Guardian article and remove the original domain so we can show them on this website. However, we will get an error page with just this. So, we catch them with [...slug].vue and go to [id].vue again.