gothinkster / vue-realworld-example-app

An exemplary real-world application built with Vue.js, Vuex, axios and different other technologies. This is a good example to discover Vue for beginners.

---

##New Maintainers wanted## Anyone up for the challenge of maintaining this repo? Reach out on twitter @vilsbole

Vue.js codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the RealWorld spec and API.

Project demo is available at https://vue-vuex-realworld.netlify.app/

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

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

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

Getting started

Before contributing please read the following:

1. RealWorld guidelines for implementing a new framework,
2. RealWorld frontend instructions
3. Realworld API endpoints
4. Vue.js styleguide. Priority A and B categories must be respected.
5. Editorconfig setup. Most of the common editors support editorconfig by default (check the editorconfig download link for your ide), but editorconfig npm package have to installed globally for it to work,

# install editorconfig globally
> npm install -g editorconfig

The stack is built using vue-cli webpack so to get started all you have to do is:

# install dependencies
> yarn install
# serve with hot reload at localhost:8080
> yarn serve

Other commands available are:

# build for production with minification
yarn run build

# run unit tests
yarn test

To know

Current arbitrary choices are:

• Vuex modules for store
• Vue-axios for ajax requests
• 'rwv' as prefix for components

These can be changed when the contributors reach a consensus.

FAQ

Where can I find the service worker file?

The service worker file is generated automatically. The implementation can be found under src/registerServiceWorker.js. You can find the dependencies implementation in this repo: yyx990803/register-service-worker.

Also, Google provided a good documentation on how to register a service worker: https://developers.google.com/web/fundamentals/primers/service-workers/registration

Vue.js Function API / Migration to Vue.js 3

Related resources:

• Vue.js Function API RFC
• vue-function-api plugin

Vue.js 3 will likely introduce breaking changes on how Vue.js applications will look like. For example, the Vue.js Function API might be introduced. This would cause a lot of our components to change in the overall structure. The changes would be minimal though. With the vue-function-api plugin, these changes could be applied already. The problem is that multiple integrations are not working with the plugin. There are intentions to make this work, but for the time being, we should rather focus on different areas. If you still want to be experimental with it, we are happy to get a Pull Request with some experimental feature implementations.

Connect

Join us on Discord

vue-realworld-example-app's Issues

Cannot register User (with Rails Api)

When trying to integrate with Realworld Rails, there is a problem when creating a new User :
(No route matches [OPTIONS] "/api/users"):
I previously had no problem with Rails stack using React however

Walkthrough of Vue example app?

Would be nice, especially for beginners, to write a guide walking through how this app was built.

Reading the source code is great for people who are more advanced, but by having a guide, we can also reach beginners.

Transform Login call to async/await

Issue Summary:

In the auth.module.js here you have got some code like:

[LOGIN](context, credentials) {
  return new Promise(resolve => {
    ApiService.post("users/login", { user: credentials })
      .then(({ data }) => {
        context.commit(SET_AUTH, data.user);
        resolve(data);
      })
      .catch(({ response }) => {
        context.commit(SET_ERROR, response.data.errors);
      });
  });
}

Those promise calls could be simpliefied with async and await calls.

Resources:

• MDN - async function
• javascript.info - async tutorial
• Jest - An Async Example
• Jest - Mock Functions
• Jest - Manual Mocks

Acceptance Criteria:

• A test is introduced, this is perfect work for TDD
• There is no .then(... or .catch(... block or any promise like structure

Main issue is here #5

Setting screen update state direct by v-modal.

We use v-model direct in computed state currentUser (setting screen), so every time change It will immediately update (change username and look at navigation bar).
For now because of #35 so it fine. But will helpful later.

Transform Register call to async/await

Issue Summary:

In the auth.module.js here you have got some code like:

[REGISTER](context, credentials) {
  return new Promise((resolve, reject) => {
    ApiService.post("users", { user: credentials })
      .then(({ data }) => {
        context.commit(SET_AUTH, data.user);
        resolve(data);
      })
      .catch(({ response }) => {
        context.commit(SET_ERROR, response.data.errors);
        reject(response);
      });
  });
}

Those promise calls could be simplified with async and await calls.

Resources:

• MDN - async function
• javascript.info - async tutorial
• Jest - An Async Example
• Jest - Mock Functions
• Jest - Manual Mocks

Acceptance Criteria:

• A test is introduced, this is perfect work for TDD
• There is no .then(... or .catch(... block or any promise like structure

The main issue can be found here #5

Wrap key in span in the ListErrors component

Issue summary

In ListErrors.vue there is an element being rendered. This element is {{key}} but is not wrapped by a <span> but should be.

Acceptance criteria

• In ListErrors.vue the key template is wrapped in a <span>

Validation errors for Register and Log In do not work the first time

The validation errors for the input fields do not show up the first time the user tries to log in or register in the application. They only show up after the first try, even if the email or user is invalid, blank or taken.

use async-await for Promises

This might be somewhat subjective... but aside from syntax sugar for dealing with Promises... there are a few other benefits of using async-await over new Promise() and .then

• async functions always return a Promise (regardless of returning a value or not) - no need to remember to call resolve()
• you can use traditional try-catch-throw for dealing with and reporting errors - no need to remember to call reject()
• for longer chains, you don't end up with a Christmas tree-shaped nesting and makes the code easier to reason about.

Here is an example from a code snippet taken from the auth module
current

  [REGISTER] (context, credentials) {
    return new Promise((resolve, reject) => {
      ApiService
        .post('users', {user: credentials})
        .then(({data}) => {
          context.commit(SET_AUTH, data.user)
          resolve(data)
        })
        .catch(({response}) => {
          context.commit(SET_ERROR, response.data.errors)
        })
    })

future

  async [REGISTER] (context, credentials) {
    try {
      const data = await ApiService
        .post('users', {user: credentials})

      context.commit(SET_AUTH, data.user)
      return data;
    } catch ({response}) {
      context.commit(SET_ERROR, response.data.errors)
    }
  },

Upgrade to vue-cli 3

When vue-cli is getting released in version 3 we should upgrade the project structure. I can do this when it will be time. Just creating this issue to keep track of it.

Right now it is in beta.6.

Normalize config module

Issue Summary

In the module src/common/config.js there is a default module defined which is an empty object. Instead export the API_URL also as default export.

Resources

• MDN - import
• MDN - export
• stackoverflow - Import Statements in ES6 from MDN docs

Acceptance Criteria

• Module is exporting API_URL as named and default export

Migrate vue-test-utils

Since the package has been moved to a scoped package we need to change the dependency.

• Old dependency: NPM
• New dependency: NPM

Basically just the dependency need to be changed and updated. Probably there are breaking changes in the tests then but i guess not (since it is still in beta).

Normalize component names

Issue Summary:

In the component src/components/ArticleList.vue some external components are used like RwvArticlePreview and VPagination. The Vue.js style guide suggests a different capitalization of component names in the <template></template> though.
Otherwise the name option in export default should be also PascalCase.

Resources:

• Vue.js Style Guide - Component name casing in templates

Acceptance Criteria:

• All project component names are in PascalCase in the <template></template> like rwv-article-preview should be RwvArticlePreview.
• The internal component name of ArticleList.vue should be RwvArticleList instead of rwv-article-list

Normalize template of TheFooter

Issue summary

In the src/components/TheFooter.vue there is no new line between <template></template> and <script></script>. But there should be a new line.

Acceptance criteria

• The <template></template> and <script></script> part are separated by a new line in src/components/TheFooter.vue component

No favicons in the index.html page

Replace default e2e tests with working specs

Currently, the e2e spec is based on the default, "Hello, World" Vue.js app. As such, the test fails when running npm run e2e (or npm run test, which includes e2e), since it looks for an element with class hello, along with 2 other failures.

To fix this, we can simply replace the defaults with a few actual tests based on the realworld app. This would also open the door to a more thorough suite of e2e tests.

System:

OS: Windows 10 x64
Node: 10.8.0
npm: 6.2.0

Framewars! Improve metrics for vue implementation

Jacek Schae comparisons of realworld-apps uses three metrics:

1. First meaningful paint
2. /src gzipped size
3. Lines of code

There is still a lot of fluff in the codebase, so we should be able to reduce the third, and most probably the two others. At least enough to significantly outrun React and Angular and maybe even ELM.

@igeligel would you have any suggestions?

Security vulnerability on TheFooter

Issue summary

In the component src/components/TheFooter.vue there is an <a></a> tag introduce which links to another site. This link is opening with target="blank" but is not taking Reverse Tabnabbing into consideration.

Resources

• Alex Yumashev - Target=”_blank” — the most underestimated vulnerability ever

Acceptance criteria

• In the src/components/TheFooter.vue component all links have an appropriate rel tag.

Login and Register both fail the first time

Including both the live demo and my local cloned project, every single time you try to login and register with valid credentials, it silently fails (without any errors). The second or third time, etc., it works.

I suppose the problem lies somewhere in the vuex implementation.

Map isAuthenticated

Map isAuthenticated in components for a check if someone is authenticated.

reference: #8

Refactor free text in ArticleActions

Issue summary

In src/components/ArticleActions.vue there are a lot of free texts which should be wrapped with <span>s or similar. Look for example:

<router-link
  class="btn btn-sm btn-outline-secondary"
  :to="{ name: 'article-edit', params: { slug: this.article.slug } }">
  <i class="ion-edit" />&nbsp;Edit Article
</router-link>

Should be

<router-link
  class="btn btn-sm btn-outline-secondary"
  :to="{ name: 'article-edit', params: { slug: this.article.slug } }">
  <i class="ion-edit" /><span>&nbsp;Edit Article</span>
</router-link>

Replace every free character/word which is not wrapped with a <span></span>.

Acceptance Criteria

• All texts in the ArticleActions.vue component are wrapped with <span></span> elements

Do not access the route directly from components

The Problem

There are quite a number of placeswhere the current route is being accessed directly from within a component.

Using $route in a component creates a tight coupling with the route and limits the components flexibility and reusability

Recommended Solution

The component should be configured to accept these as props and have the router pass the specific params along to the component (in this case, they are all Views).
This would also allow for better error handling if a particular route param is not present or needs a default value
ref: https://router.vuejs.org/en/essentials/passing-props.html#passing-props-to-route-components

Why do we pass params to onSubmit?

Hi,

In Login.vue I notice the way you pass params directly like below

<form v-on:submit.prevent="onSubmit(email, password)">

You can just do this

<form v-on:submit.prevent="onSubmit">

because you have access to email, password inside Vue instance already.

methods: {
    onSubmit () {
      this.$store
        .dispatch(LOGIN, { email: this.email, password: this.password })
        .then(() => this.$router.push({ name: 'home' }))
    }
  }

Is there any benefit to pass params explicitly like that?
Thanks

Exclude moment from the dependencies

I think it is not worth to include a library here for a simple date filter. The functionalities of moment are used once and it is really simple to exclude this here.

vue-realworld-example-app/src/common/date.filter.js:

import moment from 'moment'

export default (date) => {
  return moment(date).format('MMM DD, YYYY')
}

Can be easily transferred to a native solution.

Fix path of imported modules in ArticleList.vue

Issue summary

In src/components/ArticleList.vue some local modules are imported with the @ symbol which is a webpack alias. For people which are not familar with webpack this might be confusing. Change this to a relative pattern.

Resources

• webpack - Resolve

Acceptance Criteria

• Every @ in the import statements is replaced with a relative path.

Refactor follow and favorite behaviour when not authenticated

When we click follow or favorite, we route to /login when the user is not authenticated.
This should be handled by an axios interceptor instead to stay DRY

Make testing great again

Since the whole testing is not done, we should somehow make a plan to improve this.

Actually we should think of what to include, what to test, which types of test to include and so on. I am actually interested in e2e testing and capable of writing unit tests with vue-test-utils already. I guess e2e tests would be somehow similar.

Just want to hear some opinions on it 👍

Remove unused component

Issue Summary:

In the file src/components/ArticleList.vue there is a component imported and used in the module called RwvTag. This component is not used and should be removed.

Acceptance Criteria:

• The module import of RwvTag is not done
• The component registration of RwvTag is not done

Default image for user avatar?

When user update they setting from some String value to empty, API will return an empty string instead of the default image. Should we fix it in front-end?
And I remove submit event parameter.
#42
#38

Use directive shorthands in ArticleActions

Issue Summary

In src/components/ArticleActions.vue a lot of the Vue.js directives are not given in the shorthand form. They should be used with @ instead of v-on.

Resources

• Vue.js style guide - Directive shorthands

Acceptance Criteria

• There is no v-on in the <template></template> part of the ArticleActions.vue component

Delete unused function in ArticleActions

Issue summary

The function editArticle is never used in the component. It should be just deleted.

Acceptance criteria

• The function editArticle is deleted from the ArticleActions.vue component

Remove getters type

We have a getters.type.js wich is not wanted. We can remove and use the names themselves.

reference: #8

Transform Update User call to async/await

Issue Summary:

In the auth.module.js here you have got some code like:

[UPDATE_USER](context, payload) {
  const { email, username, password, image, bio } = payload;
  const user = {
    email,
    username,
    bio,
    image
  };
  if (password) {
    user.password = password;
  }

  return ApiService.put("user", user).then(({ data }) => {
    context.commit(SET_AUTH, data.user);
    return data;
  });
}

Those promise calls could be simplified with async and await calls.

Resources:

• MDN - async function
• javascript.info - async tutorial
• Jest - An Async Example
• Jest - Mock Functions
• Jest - Manual Mocks

Acceptance Criteria:

• A test is introduced, this is perfect work for TDD
• There is no .then(... or .catch(... block or any promise like structure

The main issue can be found here #5

Vuex store modifcations

Hello,

if I am not mistaken, the store is not used in strict mode and if you would change it to strict, you would have a lot of errors like "don't vuex mutate state outside store". Because you are binding all properties of an object directly to v-model. In my opinion this is not good practice, because mutating outside of store can lead to unexpected behaviour in big applications and so debugging would be hell.
I think this should be fixed. Either cloning the object before mutating or set for each properties the setter and getter methods, see: https://vuex.vuejs.org/en/forms.html

If you already know this, you should at least mention that inside documentation.

Cheers,

Marco

Normalize JwtService exports

Issue Summary

In the module jwt.service.js there is just a default module. All of the functions of the default export should exist as own functions and should be exported as named exports.

Resources

• MDN - import
• MDN - export
• stackoverflow - Import Statements in ES6 from MDN docs

Acceptance Criteria

• The functions getToken, saveToken and destroyToken can be imported like import { getToken, saveToken, destroyToken } from ".../jwt.service" but also the full object can be imported like import JwtService from ".../jwt.service".

Do not access the store object directly from components

The Problem

For large and real-world applications... writing this.$store. getters and this.$store. dispatch gets quite tedious and creates temptation for trying to modify things directly (such as this.$store.state.myThing = 'the new thing')

Recommended Solution

Leverage the 3 helper methods offered by Vuex (mapState, mapGetters and mapActions).

Refactor method calls in ArticleActions

Issue summary

In the component src/components/ArticleActions.vue a lot of on click handlers are triggered and are calling a method with an instance property. For example there is a handler calling deleteArticle(article.slug) even though article.slug is bound to this. Rather just use deleteArticle and refactor the instance function to something like:

deleteArticle() {
  this.$store.dispatch(ARTICLE_DELETE, this.article.slug).then(() => {
    this.$router.push("/");
  });
}

Acceptance criteria

• The deleteArticle function in the ArticleActions.vue component does not take a parameter
• The toggleFollow function in the ArticleActions.vue component does not take a parameter
• The toggleFavorite function in the ArticleActions.vue component does not take a parameter

Article is saved after creation

I don't know if i used the back button, but when i added a article and get to the arr article page the article still was on the state. We have to clean the article when mounted, or posted.

Fix audit vulnerabilities

Upon a fresh clone and npm install of the repo, npm reports 331 total package vulnerabilities. They are broken down as follows:

• 5 critical
• 13 high
• 30 moderate
• 283 low

These can also be found by running npm audit on an existing installation.

Ideally, all vulnerabilities can be fixed; certainly, the critical & high priorities, especially those that require non-major version updates (done simply with npm audit fix). Major sem-ver updates should be tested with the available package.json commands (dev, build, unit, and e2e).

System:

• OS: Windows 10 x64
• Node: 10.8.0
• npm: 6.2.0

Do not store JWT in HTML5 Local Storage

The HTML Local Storage can be compromised because it can be read by JavaScript and the same Domain. (XSS) Use Cookies instead. They are not accessible by JavaScript.

Ref.: https://stormpath.com/blog/where-to-store-your-jwts-cookies-vs-html5-web-storage

Where are the SCSS files located?

The stylesheet for this repo ( https://demo.productionready.io/main.css ) does not match the one in https://github.com/gothinkster/conduit-bootstrap-template.

Can you please publish the source?

Why do we need checked auth before each page load?

I find in main.js,

// Ensure we checked auth before each page load.
router.beforeEach(
  (to, from, next) => {
    return Promise
      .all([store.dispatch(CHECK_AUTH)])
      .then(next)
  }
)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  template: '<App/>',
  components: { App }
})

Instead of that why don't we just create an Action to check just only one time when enter site?

store.dispatch('CHECK_AUTH')
  .then(() => {
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      store,
      router,
      components: { App },
      template: '<App/>'
    })
  })

It reduce request from each time change from another page? (may be faster?)

Make components self closing

Issue Summary

The components RwvArticlePreview and VPagination are not self-closing. This is the preferred style because it comes more near to the JSX-variant. In src/components/ArticleList.vue this should be introduced.

Resources

• reactjs.org - JSX In Depth

Acceptance Criteria

• RwvArticlePreview and VPagination are self-closing because they do not have content in src/components/ArticleList.vue

License

Are we allowed to add a license to this repostory somehow?

I do not know how it is handled in other realworld applications since they do not have any license.

Improvement to track also page changes

https://github.com/vuejs/vuex-router-sync may help tracking routing states so to make time travel work also across page change

Follow user not working on article page

On the article page the follow user button is not working.

Implement route guards

For the moment we check auth, but simply purge on error.
We should guard certain routes when not authenticated, notably:

• /settings
• /editor

Promise expected but void returned.

In the following line a Promise should be returned to satisfy call to the Promise.all():

vue-realworld-example-app/src/main.js

Line 24 in a56e4c0

.all([store.dispatch(CHECK_AUTH)])

Transform Check Auth call to async/await

Issue Summary:

In the auth.module.js here you have got some code like:

[CHECK_AUTH](context) {
  if (JwtService.getToken()) {
    ApiService.setHeader();
    ApiService.get("user")
      .then(({ data }) => {
        context.commit(SET_AUTH, data.user);
      })
      .catch(({ response }) => {
        context.commit(SET_ERROR, response.data.errors);
      });
  } else {
    context.commit(PURGE_AUTH);
  }
}

Those promise calls could be simplified with async and await calls.

Resources:

• MDN - async function
• javascript.info - async tutorial
• Jest - An Async Example
• Jest - Mock Functions
• Jest - Manual Mocks

Acceptance Criteria:

• A test is introduced, this is perfect work for TDD
• There is no .then(... or .catch(... block or any promise like structure

The main issue can be found here #5

Rename component name in TheFooter

Issue summary

The name in src/components/TheFooter.vue is not PascalCase.

Acceptance criteria

• rwvFooter should be RwvFooter in the src/components/TheFooter.vue component

Use async/await in method and extend error handling

Issue summary

The deleteArticle is using a Promise even though it could use the async/await pattern.

Resources

• MDN - async function
• javascript.info - async tutorial
• MDN - try...catch

Acceptance criteria

• There are no .then(... call in the function anymore
• async and await are used
• A try-catch block was introduced to handle errors and the page is not redirecting to the homepage