pocojang / nuxt-realworld

🛠 Built a Example App of RealWorld with Nuxt & Composition API ⚗️

Nuxt + Composition API RFC codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the RealWorld spec and API.

Demo    RealWorld

This codebase was created to demonstrate a fully fledged fullstack application built with Nuxt including CRUD operations, authentication, routing, pagination, and more.

We've gone to great lengths to adhere to the Nuxt community styleguides & best practices.

For more information on how to this works with other frontends/backends, head over to the RealWorld repo.

How it works

|____api           # api service
|____components    # Single File Components of Vue
|____compositions  # @composition-api base logic
|____pages         # Page Components of Nuxt
|____plugins       # inject to api service
|____types         # declare to Vue & Next type & Real World Model Type

Getting started

# install dependencies
$ npm install
or
$ yarn install

# serve with hot reload at localhost:3000
$ npm run dev
or
$ yarn dev

# build for production and launch server
$ npm run build
$ npm start
or
$ yarn build
$ yarn start

# generate static project
$ npm run generate
or
$ yarn generate

Functionality overview

The example application is a social blogging site (i.e. a Medium.com clone) called "Conduit". It uses a custom API for all requests, including authentication. You can view a live demo over at https://nuxt-realworld.vercel.app

General functionality:

• Authenticate users via JWT (login/signup pages + logout button on settings page)
• CRU* users (sign up & settings page - no deleting required)
• CRUD Articles
• CR*D Comments on articles (no updating required)
• GET and display paginated lists of articles
• Favorite articles
• Follow other users

The general page breakdown looks like this:

• Home page (URL: / )
  • List of tags
  • List of articles pulled from either Feed, Global, or by Tag
  • Pagination for list of articles
• Sign in/Sign up pages (URL: /login, /register )
  • Use JWT (store the token in localStorage)
• Settings page (URL: /settings )
• Editor page to create/edit articles (URL: /editor, /editor/article-slug-here )
• Article page (URL: /article/article-slug-here )
  • Delete article button (only shown to article's author)
  • Render markdown from server client side
  • Comments section at bottom of page
  • Delete comment button (only shown to comment's author)
• Profile page (URL: /profile/username, /profile/username/favorites )
  • Show basic user info
  • List of articles populated from author's created articles or author's favorited articles

Vue related implementations of the Realworld app

gothinkster/vue-realworld-example-app - vue2, js
AlexBrohshtut/vue-ts-realworld-app - vue2, ts, class-component
mutoe/vue3-realworld-example-app - vue3, vite, ts, composition api

nuxt-realworld's Issues

use Docker

Could you please add links to other vue related implementations?

The goal of this to have all implementations linked with each other

Other implementations:
https://github.com/gothinkster/vue-realworld-example-app - vue2, js
https://github.com/AlexBrohshtut/vue-ts-realworld-app - vue2, ts, class-component
https://github.com/mutoe/vue3-realworld-example-app - vue3, vite, ts, composition api
https://github.com/levchak0910/vue3-ssr-realworld-example-app - vue3, ssr

build error on node 16

$ node -v
v16.13.0
$ yarn build
yarn run v1.22.10
$ nuxt-ts build

 ERROR  (node:19113) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at /Volumes/Code/codes-farm/nuxt-realworld/node_modules/@nuxt/components/package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)

some bugs of user profile's article list sub route and home page

Hi, guys

This is a very excellent demo project for the Nuxt community to learn it, especially like me who was first touch it.

I build projects from scratch and follow your code line by line. The backend references the project Conduit_NodeJS.

Conduit_NodeJS The project was written very simply and did the basics, but it had a lot of problems and didn't implement the API as it was supposed to, so I was mostly working on the original issues of the various projects. The Nuxt project taught me a lot about TypeScript and how to use Composition Api to encapsulate business logic.

In the current learning process, I also found some small problems, by the way, feedback:

1. An internal request is sent each time useProfileList() is called, which causes the list of articles to be repeatedly requested on the profile page.
2. The currently active tab does not display correctly based on the route change. If you are currently in the Favorited Posts tab, when you refresh the page, My Posts is selected, but the interface request is api/articles?favorited=xx&limit =20&offset=0. Also, if you click the user name on the profile page, the new profile page will not display correctly.
3. Normal logic if the user is logged in to see their favorite articles are highlighted. However, since it is rendered by the server, there is no authorization information at the request of the server, so the user cannot see it.

Here are my solutions for your reference:

Profile page problems

path: /compositions/useProfileList.ts

export default function useProfileList(triggerFetch?: boolean) {
  // omit some code ...
  const { fetchState } = useFetch(async () => {
    const postTypeBy: { [P: string]: PostType } = {
      'profile-userName': 'AUTHOR',
      'profile-userName-favorites': 'FAVORITED'
    }

    if (route.value.name) {
      const postType = postTypeBy[route.value.name]

      if (triggerFetch) {
        await getArticleListByPost({ userName, postType })
      }
    }
  })
}

path: /pages/profile/_userName.vue add code:

watch(() => route.value, val => {
  if (val.name === 'profile-userName') {
    setPostType(postTypes[0].type)
  } else if (val.name === 'profile-userName-favorites') {
    setPostType(postTypes[1].type)
  }
}, {
  immediate: true
}

last, in file /pages/profile/_userName/index.vue and /pages/profile/_userName/favorites.vue, when call method useProfileList we pass parameter true.

The home page problems, I add some delay to wait till the auth token got, and the next request will take auth token in request headers so the server response the right payload.

path: /layout/default.vue

<template>
  <div id="main">
    <app-header />
      <template v-if="showRoute">
        <Nuxt />
      </template>
    <app-footer />
  </div>
</template>

<script lang="ts">
import { defineComponent, useAsync, ref, watch } from '@nuxtjs/composition-api'
import appFooter from './appFooter.vue'
import appHeader from './appHeader.vue'
import useUser from '@/compositions/useUser'

export default defineComponent({
  name: 'Default',
  components: {
    appHeader,
    appFooter,
  },
  setup() {
    const { user, retryLogin } = useUser()
    const showRoute = ref(false)

    useAsync(() => {
      if (process.server) {
        return false
      }

      const token = window.localStorage.getItem('token')

      if (token) {
        retryLogin(token)
      }
    })


    const cancelWatch = watch(user, (val) => {
      if (val.token) {
        clearTimeout(timeout)
        showRoute.value = true
      }
    })

    const timeout = setTimeout(() => {
      if (!showRoute.value) {
        cancelWatch()
        showRoute.value = true
      }
    }, 300)

    return {
      user,
      showRoute
    }
  },
})
</script>

Is this repository still maintained?

It seems this repo is no longer maintained.

use CI

eg. GitHub Actions

when register a new user account it will trigger twice submit method

in component components/common/FormContainer.vue Line 13

replace <form @submit.prevent="$emit('on-submit')"> with <form @submit.prevent> will fix this problem。

How to use JWT and store the token in cookies?

How to use JWT and store the token in cookies? thanks u

API Domain change

Hello!

Due to governance changes, we are now using the realworld.io domain for the RealWorld demo (both client and API).
Requests from conduit.productionready.io are redirected to api.realworld.io, but such a redirection might lead to inconsistent responses.

We encourage domain change for the community.
If this repository is maintained anymore, we'll consider hosting a demo of your implementation in a few weeks with the domain change.

The demo link will be added to the RealWorld documentation.