Nuxt Dev To Clone

Nuxt Dev To Clone is a NuxtJS boilerplate that builds a DEV.TO-style article aggregator by pulling data from the public DEV.TO API and demonstrating the capabilities of Nuxt's new fetch hook.

What is Nuxt Dev To Clone?

Nuxt Dev To Clone is an open-source demo application and starter template for building article aggregation sites with NuxtJS. It takes article data from the DEV.TO public API (documented at docs.dev.to/api) and renders an article feed interface styled with neumorphism (soft UI) design. The project is maintained by bdrtsky on GitHub, where it has 154 stars. It runs on NuxtJS with Vue.js and SCSS, and a live demo is hosted at quixotic-scissors.surge.sh.

Key Features

• $fetchState placeholder handling — Use the $fetchState property to display placeholders while data is fetching on the client side.
• Cached API requests with keep-alive — Leverage keep-alive and the activated hook to cache API requests on already visited pages.
• Reusable fetch hook — Call this.$fetch() to programmatically re-run fetch logic, enabling refresh.
• fetchOnServer control — Set fetchOnServer to choose between server-side rendering or client-only data fetching.
• Fetch error handling — Handle errors from the fetch hook gracefully.
• DEV.TO API integration — Consumes the public DEV.TO API to show articles.
• Neumorphism UI with SCSS — Built with soft, neumorphic design using SCSS styling.

Who is it for?

• Nuxt.js developers who want a working example of the new fetch hook to learn from.
• Frontend engineers building content aggregation platforms can adapt its API fetching and caching logic.
• Educators teaching Vue/Nuxt can use it as a practical project.

What can you do with it?

• Create a dev.to clone — Assemble an article feed that pulls from the DEV.TO API and displays posts in a card layout.
• Experiment with server-side data fetching — Use fetchOnServer and $fetchState to control where and how data loads.
• Apply caching patterns — Implement keep-alive and activated to reuse fetched data across page visits.

How does it work?

The repository provides clear Getting Started steps: clone the project, install dependencies, start the development server, and open localhost:3000. It also includes a CodeSandbox button so you can run and edit the project directly in your browser without local setup.

FAQ

Is Nuxt Dev To Clone free to use?

Yes, the source code is publicly available on GitHub under bdrtsky's account. You can clone, modify, and deploy it freely.

Which API does it use?

It uses the public DEV.TO API to fetch article content. No API key is required, as DEV.TO allows read-only access to article listings.

Can I deploy it to production?

The project includes a live demo on surge.sh, and because it's a standard Nuxt app, you can build and deploy it to any static or Node.js hosting platform.