├── .gitignore
├── README.md
├── components
    ├── Banner.vue
    ├── Feed.vue
    └── NavBar.vue
├── layouts
    └── default.vue
├── logo.png
├── netlify.toml
├── nuxt.config.js
├── package.json
├── pages
    ├── article
    │   └── _slug.vue
    ├── editor.vue
    ├── index.vue
    ├── login.vue
    ├── profile
    │   └── _username.vue
    ├── register.vue
    └── settings.vue
├── plugins
    └── axios.js
├── static
    └── favicon.ico
└── store
    └── index.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | package-lock.json
3 | yarn.lock
4 | .nuxt
5 | dist
6 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ![RealWorld Example App](logo.png)
 2 | 
 3 | [![RealWorld Frontend](https://img.shields.io/badge/realworld-frontend-%23783578.svg)](http://realworld.io)
 4 | 
 5 | > ### [Nuxt.js](https://nuxtjs.org) codebase containing real world examples (CRUD, auth, advanced patterns, etc) that adheres to the [RealWorld](https://github.com/gothinkster/realworld) spec and API.
 6 | 
 7 | ### [Demo](http://realworld-nuxt.netlify.com)    [RealWorld](https://github.com/gothinkster/realworld)
 8 | 
 9 | This codebase was created to demonstrate a fully fledged fullstack application built with **[Nuxt.js](https://nuxtjs.org)** including CRUD operations, authentication, routing, pagination, and more.
10 | 
11 | We've gone to great lengths to adhere to the **[Nuxt.js](https://nuxtjs.org)** community styleguides & best practices.
12 | 
13 | For more information on how to this works with other frontends/backends, head over to the [RealWorld](https://github.com/gothinkster/realworld) repo.
14 | 
15 | # How it works
16 | 
17 | > TODO: Describe the general architecture of your app here
18 | 
19 | # Getting started
20 | 
21 | ```bash
22 | git clone https://github.com/anishkny/realworld-nuxt
23 | cd realworld-nuxt
24 | npm install
25 | npm run dev
26 | ```
27 | 


--------------------------------------------------------------------------------
/components/Banner.vue:
--------------------------------------------------------------------------------
1 | <template>
2 | <div class="banner">
3 |   <div class="container">
4 |     <h1 class="logo-font">conduit</h1>
5 |     <p>A place to share your knowledge.</p>
6 |   </div>
7 | </div>
8 | </template>
9 | 


--------------------------------------------------------------------------------
/components/Feed.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div>
  3 |   <div v-for="article in articles" class="article-preview">
  4 |     <div class="article-meta">
  5 |       <nuxt-link class="" :to="'/profile/' + article.author.username">
  6 |         <img :src="article.author.image || 'https://static.productionready.io/images/smiley-cyrus.jpg'">
  7 |       </nuxt-link>
  8 |       <div class="info">
  9 |         <nuxt-link class="author" :to="'/profile/' + article.author.username">
 10 |           {{article.author.username}}
 11 |         </nuxt-link>
 12 |         <span class="date">{{article.updatedAtDisplay}}</span>
 13 |       </div>
 14 |       <div class="pull-xs-right">
 15 |         <button @click.stop.prevent="handleFavoriteClick(article, $event)" class="btn btn-sm" :class="{ 'btn-outline-primary': !article.favorited, 'btn-primary': article.favorited }">
 16 |           <i class="ion-heart"></i>&nbsp;{{article.favoritesCount}}
 17 |         </button>
 18 |       </div>
 19 |     </div>
 20 |     <nuxt-link class="preview-link" :to="'/article/' + article.slug">
 21 |       <h1>{{article.title}}</h1>
 22 |       <p>{{article.description}}</p>
 23 |       <span>Read more...</span>
 24 |       <ul class="tag-list">
 25 |         <li v-for="tag in article.tagList" class="tag-default tag-pill tag-outline">
 26 |           {{tag}}
 27 |         </li>
 28 |       </ul>
 29 |     </nuxt-link>
 30 |   </div>
 31 | 
 32 |   <nav>
 33 |     <ul class="pagination">
 34 |       <li v-for="pageNumber in Math.ceil(articlesCount/10)" :class="{'page-item': true, 'active': pageNumber == currentPage}">
 35 |         <a href="" class="page-link" @click.prevent.stop="currentPage=pageNumber;">{{pageNumber}}</a>
 36 |       </li>
 37 |     </ul>
 38 |   </nav>
 39 | 
 40 | </div>
 41 | </template>
 42 | 
 43 | <script>
 44 | import moment from 'moment';
 45 | 
 46 | export default {
 47 | 
 48 |   props: ['filter'],
 49 | 
 50 |   data() {
 51 |     return {
 52 |       articles: [],
 53 |       articlesCount: 0,
 54 |       currentPage: 0,
 55 |     }
 56 |   },
 57 | 
 58 |   mounted() {
 59 |     this.currentPage = 1; // Force currentPage watcher to fire
 60 |   },
 61 | 
 62 |   watch: {
 63 |     currentPage() {
 64 |       this.getArticles();
 65 |     },
 66 |     filter() {
 67 |       this.currentPage = 1;
 68 |       this.getArticles();
 69 |     },
 70 |   },
 71 | 
 72 |   methods: {
 73 | 
 74 |     async getArticles() {
 75 |       if (this.currentPage <= 0) {
 76 |         return;
 77 |       }
 78 |       const offset = (this.currentPage - 1) * 10;
 79 |       let url = '';
 80 |       if (this.filter == 'feed') {
 81 |         url = `/articles/feed?limit=10&offset=${offset}`;
 82 |       } else {
 83 |         url = `/articles?limit=10&offset=${offset}&${this.filter}`;
 84 |       }
 85 |       const res = (await this.$axios.get(url)).data;
 86 |       res.articles.forEach(a => a.updatedAtDisplay = moment(a.updatedAt).format('ddd MMM D YYYY'));
 87 |       this.articles = res.articles;
 88 |       this.articlesCount = res.articlesCount;
 89 |     },
 90 | 
 91 |     handleFavoriteClick(article, event) {
 92 |       if (!this.$store.getters.user) {
 93 |         this.$router.push('/login');
 94 |       } else {
 95 |         event.target.blur();
 96 |         if (!article.favorited) {
 97 |           this.$axios.post(`/articles/${article.slug}/favorite`, {}).then(this.getArticles);
 98 |           article.favorited = true;
 99 |         } else {
100 |           this.$axios.delete(`/articles/${article.slug}/favorite`).then(this.getArticles);
101 |           article.favorited = false;
102 |         }
103 |       }
104 |     },
105 | 
106 |   },
107 | 
108 | }
109 | </script>
110 | 


--------------------------------------------------------------------------------
/components/NavBar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <nav class="navbar navbar-light">
 3 |   <div class="container">
 4 |     <nuxt-link to="/" class="navbar-brand">conduit</nuxt-link>
 5 | 
 6 |     <ul class="nav navbar-nav">
 7 |       <li class="nav-item">
 8 |         <a href="https://github.com/anishkny/realworld-nuxt" class="nav-link" style="color: red;">Work in progress!</a>
 9 |       </li>
10 |     </ul>
11 | 
12 |     <ul class="nav navbar-nav pull-xs-right">
13 |       <li class="nav-item">
14 |         <nuxt-link to="/" class="nav-link">Home</nuxt-link>
15 |       </li>
16 | 
17 |       <template v-if="$store.getters.user">
18 |         <li class="nav-item">
19 |           <nuxt-link to="/editor" class="nav-link"><i class="ion-compose"></i>&nbsp;New Post</nuxt-link>
20 |         </li>
21 |         <li class="nav-item">
22 |           <nuxt-link to="/settings" class="nav-link"><i class="ion-gear-a"></i>&nbsp;Settings</nuxt-link>
23 |         </li>
24 |         <li class="nav-item">
25 |           <nuxt-link :to="'/profile/' + $store.getters.user.username" class="nav-link">
26 |             <img :src="$store.getters.user.image || 'https://static.productionready.io/images/smiley-cyrus.jpg'" class="user-pic">
27 |             {{$store.getters.user.username}}
28 |           </nuxt-link>
29 |         </li>
30 |       </template>
31 | 
32 |       <template v-else>
33 |         <li class="nav-item">
34 |           <nuxt-link to="/login" class="nav-link">Sign in</nuxt-link>
35 |         </li>
36 |         <li class="nav-item">
37 |           <nuxt-link to="/register" class="nav-link">Sign up</nuxt-link>
38 |         </li>
39 |       </template>
40 |     </ul>
41 |   </div>
42 | </nav>
43 | </template>
44 | 


--------------------------------------------------------------------------------
/layouts/default.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div>
 3 |   <nav-bar></nav-bar>
 4 |   <nuxt/>
 5 |   <a href="https://github.com/anishkny/realworld-nuxt" id="forkOnGH">
 6 |     <i class="ion-social-github"></i>&nbsp;&nbsp;Fork on GitHub</a>
 7 | </div>
 8 | </template>
 9 | 
10 | <script>
11 | import NavBar from '@/components/NavBar';
12 | 
13 | export default {
14 |   components: {
15 |     NavBar,
16 |   },
17 | }
18 | </script>
19 | 
20 | <style scoped>
21 | #forkOnGH {
22 |   position: fixed;
23 |   bottom: 0;
24 |   width: 100%;
25 |   background: linear-gradient(#485563, #29323c);
26 |   text-align: center;
27 |   padding: 15px;
28 |   box-shadow: 0 5px 5px 5px rgba(0, 0, 0, 0.4);
29 |   z-index: 999;
30 |   color: #fff;
31 |   font-size: 1.5rem;
32 |   display: block
33 | }
34 | </style>
35 | 


--------------------------------------------------------------------------------
/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anishkny/realworld-nuxt/003dcad27be7f3bb889a3ea0b117ce5714787d1c/logo.png


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
1 | [Settings]
2 |   ID = "realworld-nuxt"
3 | 
4 | [build]
5 |   publish = "dist/"
6 |   command = "npm run build"
7 | 


--------------------------------------------------------------------------------
/nuxt.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 
 3 |   mode: 'spa',
 4 | 
 5 |   head: {
 6 |     title: 'Conduit',
 7 |     meta: [
 8 |       { charset: 'utf-8' },
 9 |       { name: 'viewport', content: 'width=device-width, initial-scale=1' },
10 |     ],
11 |     link: [
12 |       { rel: 'stylesheet', href: '//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css' },
13 |       { rel: 'stylesheet', href: '//fonts.googleapis.com/css?family=Titillium+Web:700|Source+Serif+Pro:400,700|Merriweather+Sans:400,700|Source+Sans+Pro:400,300,600,700,300italic,400italic,600italic,700italic' },
14 |       { rel: 'stylesheet', href: '//demo.productionready.io/main.css' },
15 |     ],
16 |   },
17 | 
18 |   modules: [
19 |     '@nuxtjs/axios',
20 |     '@nuxtjs/markdownit',
21 |   ],
22 | 
23 |   plugins: [
24 |     '~/plugins/axios',
25 |   ],
26 | 
27 |   markdownit: {
28 |     injected: true
29 |   },
30 | 
31 | }
32 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "scripts": {
 3 |     "dev": "nuxt",
 4 |     "build": "nuxt build"
 5 |   },
 6 |   "dependencies": {
 7 |     "@nuxtjs/axios": "^5.3.1",
 8 |     "@nuxtjs/markdownit": "^1.2.1",
 9 |     "moment": "^2.22.1",
10 |     "nuxt": "^1.4.0"
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/pages/article/_slug.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div class="article-page">
  3 |   <div class="banner">
  4 |     <div class="container">
  5 |       <h1>{{article.title}}</h1>
  6 |       <div class="article-meta">
  7 |         <nuxt-link :to="'/profile/' + article.author.username">
  8 |           <img :src="article.author.image || 'https://static.productionready.io/images/smiley-cyrus.jpg'">
  9 |         </nuxt-link>
 10 |         <div class="info">
 11 |           <nuxt-link :to="'/profile/' + article.author.username" class="author">
 12 |             {{article.author.username}}
 13 |           </nuxt-link>
 14 |           <span class="date">{{article.updatedAtDisplay}}</span>
 15 |         </div>
 16 |         <span></span>
 17 |       </div>
 18 |     </div>
 19 |   </div>
 20 | 
 21 |   <div class="container page">
 22 |     <div class="row article-content">
 23 |       <div class="col-xs-12">
 24 |         <div>
 25 |           <p v-html="$md.render(article.body)"></p>
 26 |         </div>
 27 |         <ul class="tag-list">
 28 |           <li v-for="tag in article.tagList " class="tag-default tag-pill tag-outline">{{tag}}</li>
 29 |         </ul>
 30 |       </div>
 31 |     </div>
 32 |     <hr>
 33 |     <div class="article-actions"></div>
 34 | 
 35 |     <div class="row">
 36 |       <div class="col-xs-12 col-md-8 offset-md-2">
 37 | 
 38 |         <form v-if="$store.getters.user" class="card comment-form">
 39 |           <div class="card-block">
 40 |             <textarea v-model="newCommentText" class="form-control" placeholder="Write a comment..." rows="3">
 41 |             </textarea>
 42 |           </div>
 43 |           <div class="card-footer">
 44 |             <img :src="$store.getters.user.image || 'https://static.productionready.io/images/smiley-cyrus.jpg'" class="comment-author-img">
 45 |             <button @click.stop.prevent="handlePostComment" class="btn btn-sm btn-primary" type="submit">
 46 |               Post Comment
 47 |             </button>
 48 |           </div>
 49 |         </form>
 50 | 
 51 |         <p v-else>
 52 |           <nuxt-link to="/login">Sign in</nuxt-link> &nbsp;or&nbsp;
 53 |           <nuxt-link to="/register">sign up</nuxt-link> &nbsp;to add comments on this article.
 54 |         </p>
 55 | 
 56 |         <div>
 57 | 
 58 |           <div v-for="comment in comments" class="card">
 59 |             <div class="card-block">
 60 |               <p class="card-text">{{comment.body}}</p>
 61 |             </div>
 62 |             <div class="card-footer">
 63 |               <nuxt-link :to="'/profile/' + comment.author.username">
 64 |                 <img :src="comment.author.image || 'https://static.productionready.io/images/smiley-cyrus.jpg'" class="comment-author-img">
 65 |               </nuxt-link>
 66 |               &nbsp;
 67 |               <nuxt-link :to=" '/profile/' + comment.author.username " class="comment-author">
 68 |                 {{comment.author.username}}
 69 |               </nuxt-link>
 70 |               <span class="date-posted">{{comment.updatedAtDisplay}}</span>
 71 |               <span v-if="$store.getters.user && comment.author.username == $store.getters.user.username" class="mod-options">
 72 |                 <i @click="handleDeleteComment(comment.id)" class="ion-trash-a"></i>
 73 |               </span>
 74 |             </div>
 75 |           </div>
 76 | 
 77 |         </div>
 78 |       </div>
 79 |     </div>
 80 |   </div>
 81 | </div>
 82 | </template>
 83 | 
 84 | <script>
 85 | import moment from 'moment';
 86 | 
 87 | export default {
 88 |   data() {
 89 |     return {
 90 |       article: {
 91 |         title: '',
 92 |         slug: '',
 93 |         body: '',
 94 |         createdAt: '',
 95 |         updatedAt: '',
 96 |         tagList: [],
 97 |         description: '',
 98 |         author: {
 99 |           username: '',
100 |           bio: '',
101 |           image: 'https://static.productionready.io/images/smiley-cyrus.jpg',
102 |           following: false,
103 |         },
104 |         favorited: false,
105 |         favoritesCount: 0,
106 |       },
107 |       comments: [],
108 |       newCommentText: '',
109 |     }
110 |   },
111 | 
112 |   methods: {
113 | 
114 |     handlePostComment() {
115 |       this.$axios.post(`/articles/${this.$route.params.slug}/comments`, {
116 |         comment: { body: this.newCommentText }
117 |       }).then(this.getComments);
118 |       this.newCommentText = '';
119 |     },
120 | 
121 |     getComments() {
122 |       this.$axios.get(`/articles/${this.$route.params.slug}/comments`)
123 |         .then(res => {
124 |           this.comments = res.data.comments;
125 |           this.comments.forEach(c => c.updatedAtDisplay = moment(c.updatedAt).format('ddd MMM D YYYY'));
126 |         });
127 |     },
128 | 
129 |     handleDeleteComment(commentId) {
130 |       this.$axios.delete(`/articles/${this.$route.params.slug}/comments/${commentId}`)
131 |         .then(this.getComments);
132 |     },
133 | 
134 |   },
135 | 
136 |   mounted() {
137 |     this.$axios.get(`/articles/${this.$route.params.slug}`)
138 |       .then(res => {
139 |         this.article = res.data.article;
140 |         this.article.updatedAtDisplay = moment(this.article.updatedAt).format('ddd MMM D YYYY');
141 |       });
142 |     this.getComments();
143 |   },
144 | 
145 | }
146 | </script>
147 | 


--------------------------------------------------------------------------------
/pages/editor.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="editor-page">
 3 |   <div class="container page">
 4 |     <div class="row">
 5 |       <div class="col-md-10 offset-md-1 col-xs-12">
 6 |         <form>
 7 |           <fieldset>
 8 |             <fieldset class="form-group"><input type="text" class="form-control form-control-lg" placeholder="Article Title"></fieldset>
 9 |             <fieldset class="form-group"><input type="text" class="form-control" placeholder="What's this article about?"></fieldset>
10 |             <fieldset class="form-group"><textarea class="form-control" rows="8" placeholder="Write your article (in markdown)"></textarea></fieldset>
11 |             <fieldset class="form-group"><input type="text" class="form-control" placeholder="Enter tags">
12 |               <div class="tag-list"></div>
13 |             </fieldset><button class="btn btn-lg pull-xs-right btn-primary" type="button">Publish Article</button></fieldset>
14 |         </form>
15 |       </div>
16 |     </div>
17 |   </div>
18 | </div>
19 | </template>
20 | 


--------------------------------------------------------------------------------
/pages/index.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="home-page">
 3 |   <banner v-if="!$store.getters.user"></banner>
 4 | 
 5 |   <div class="container page">
 6 |     <div class="row">
 7 | 
 8 |       <div class="col-md-9">
 9 |         <div class="feed-toggle">
10 |           <ul class="nav nav-pills outline-active">
11 |             <li v-if="$store.getters.user" class="nav-item">
12 |               <a href="" @click.stop.prevent="selectedTab = 'YOUR_FEED'; filter = 'feed';" class="nav-link" :class="{ 'active': selectedTab == 'YOUR_FEED' }">Your Feed</a>
13 |             </li>
14 |             <li class="nav-item">
15 |               <a href="" @click.stop.prevent="selectedTab = 'GLOBAL_FEED'; filter = '';" :class="{ 'nav-link': true, 'active': selectedTab == 'GLOBAL_FEED' }">
16 |                 Global Feed
17 |               </a>
18 |             </li>
19 |             <li v-if="selectedTab == 'TAG'" class="nav-item active">
20 |               <a href="" class="nav-link active">
21 |                 <i class="ion-pound"></i>{{currentTag}}
22 |               </a>
23 |             </li>
24 |           </ul>
25 |         </div>
26 |         <feed :filter="filter"></feed>
27 |       </div>
28 | 
29 |       <div class="col-md-3">
30 |         <div class="sidebar">
31 |           <p>Popular Tags</p>
32 |           <div class="tag-list">
33 |             <a href="" v-for="tag in tags" @click.stop.prevent="selectedTab = 'TAG'; currentTag=tag; filter = 'tag=' + tag;" class="tag-default tag-pill">{{tag}}</a>
34 |           </div>
35 |         </div>
36 |       </div>
37 | 
38 |     </div>
39 |   </div>
40 | 
41 | </div>
42 | </template>
43 | 
44 | <script>
45 | import Banner from '@/components/Banner';
46 | import Feed from '@/components/Feed';
47 | 
48 | export default {
49 | 
50 |   components: {
51 |     Banner,
52 |     Feed,
53 |   },
54 | 
55 |   data() {
56 |     return {
57 |       tags: [],
58 |       currentTag: '',
59 |       filter: '',
60 |       selectedTab: 'GLOBAL_FEED',
61 |     }
62 |   },
63 | 
64 |   mounted() {
65 |     this.$axios.get('/tags').then(res =>
66 |       this.tags = res.data.tags);
67 |     if (this.$store.getters.user) {
68 |       this.selectedTab = 'YOUR_FEED';
69 |       this.filter = 'feed';
70 |     }
71 |   },
72 | 
73 | }
74 | </script>
75 | 


--------------------------------------------------------------------------------
/pages/login.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="auth-page">
 3 |   <div class="container page">
 4 |     <div class="row">
 5 |       <div class="col-md-6 offset-md-3 col-xs-12">
 6 |         <h1 class="text-xs-center">Sign In</h1>
 7 |         <p class="text-xs-center">
 8 |           <nuxt-link class="" to="/register">Need an account?</nuxt-link>
 9 |         </p>
10 |         <form>
11 |           <fieldset>
12 |             <fieldset class="form-group">
13 |               <input v-model="email" type="email" class="form-control form-control-lg" placeholder="Email">
14 |             </fieldset>
15 |             <fieldset class="form-group">
16 |               <input v-model="password" type="password" class="form-control form-control-lg" placeholder="Password">
17 |             </fieldset>
18 |             <button @click.stop.prevent="handleLogin" class="btn btn-lg btn-primary pull-xs-right" type="submit">
19 |               Sign in
20 |             </button>
21 |           </fieldset>
22 |         </form>
23 |       </div>
24 |     </div>
25 |   </div>
26 | </div>
27 | </template>
28 | 
29 | <script>
30 | export default {
31 |   data() {
32 |     return {
33 |       email: '',
34 |       password: '',
35 |     }
36 |   },
37 |   methods: {
38 |     handleLogin() {
39 |       this.$axios.post('/users/login', {
40 |         user: {
41 |           email: this.email,
42 |           password: this.password,
43 |         },
44 |       }).then(res => {
45 |         this.$store.commit('setUser', res.data.user);
46 |         this.$router.push('/');
47 |       });
48 |     },
49 |   },
50 | }
51 | </script>
52 | 


--------------------------------------------------------------------------------
/pages/profile/_username.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="profile-page">
 3 | 
 4 |   <div class="user-info">
 5 |     <div class="container">
 6 |       <div class="row">
 7 |         <div class="col-xs-12 col-md-10 offset-md-1">
 8 |           <img :src="profile.image || 'https://static.productionready.io/images/smiley-cyrus.jpg'" class="user-img">
 9 |           <h4>{{$route.params.username}}</h4>
10 |           <p>{{profile.bio}}</p>
11 | 
12 |           <button v-if="$store.getters.user && $store.getters.user.username == $route.params.username" @click.stop.prevent="$router.push('/settings')" class="btn btn-sm action-btn btn-outline-secondary">
13 |             <i class="ion-gear-a"></i>&nbsp;
14 |             Edit profile settings
15 |           </button>
16 |           <button v-else class="btn btn-sm action-btn btn-outline-secondary">
17 |             <i class="ion-plus-round"></i>&nbsp;
18 |             <span v-if="profile.following">Unfollow</span>
19 |             <span v-else>Follow</span>
20 |             {{$route.params.username}}
21 |           </button>
22 | 
23 |         </div>
24 |       </div>
25 |     </div>
26 |   </div>
27 | 
28 |   <div class="container">
29 |     <div class="row">
30 |       <div class="col-xs-12 col-md-10 offset-md-1">
31 |         <div class="articles-toggle">
32 |           <ul class="nav nav-pills outline-active">
33 |             <li class="nav-item">
34 |               <a href="" @click.stop.prevent="selectedTab = 'MY_ARTICLES'" class="nav-link" :class="{active: selectedTab == 'MY_ARTICLES'}">My Articles</a>
35 |             </li>
36 |             <li class="nav-item">
37 |               <a href="" @click.stop.prevent="selectedTab = 'FAVORITED_ARTICLES'" class="nav-link" :class="{active: selectedTab == 'FAVORITED_ARTICLES'}">Favorited Articles</a>
38 |             </li>
39 |           </ul>
40 |         </div>
41 |         <feed :filter="filter"></feed>
42 |       </div>
43 |     </div>
44 |   </div>
45 | 
46 | </div>
47 | </template>
48 | 
49 | <script>
50 | import Feed from '@/components/Feed';
51 | 
52 | export default {
53 |   components: {
54 |     Feed,
55 |   },
56 |   data() {
57 |     return {
58 |       selectedTab: 'MY_ARTICLES',
59 |       profile: {
60 |         username: this.$route.params.username,
61 |         bio: '',
62 |         image: '',
63 |         following: false,
64 |       },
65 |     }
66 |   },
67 |   computed: {
68 |     filter() {
69 |       if (this.selectedTab == 'MY_ARTICLES') {
70 |         return `author=${this.$route.params.username}`;
71 |       } else {
72 |         return `favorited=${this.$route.params.username}`;
73 |       }
74 |     },
75 |   },
76 |   mounted() {
77 |     this.$axios.get(`/profiles/${this.$route.params.username}`)
78 |       .then(res => {
79 |         this.profile = res.data.profile;
80 |       });
81 |   },
82 | }
83 | </script>
84 | 


--------------------------------------------------------------------------------
/pages/register.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 | <div class="auth-page">
 3 |   <div class="container page">
 4 |     <div class="row">
 5 |       <div class="col-md-6 offset-md-3 col-xs-12">
 6 |         <h1 class="text-xs-center">Sign Up</h1>
 7 |         <p class="text-xs-center">
 8 |           <nuxt-link class="" to="/login">Have an account?</nuxt-link>
 9 |         </p>
10 |         <form>
11 |           <fieldset>
12 |             <fieldset class="form-group">
13 |               <input v-model="username" type="text" class="form-control form-control-lg" placeholder="Username">
14 |             </fieldset>
15 |             <fieldset class="form-group">
16 |               <input v-model="email" type="email" class="form-control form-control-lg" placeholder="Email">
17 |             </fieldset>
18 |             <fieldset class="form-group">
19 |               <input v-model="password" type="password" class="form-control form-control-lg" placeholder="Password">
20 |             </fieldset>
21 |             <button @click.stop.prevent="handleSignup" class="btn btn-lg btn-primary pull-xs-right" type="submit">Sign up</button>
22 |           </fieldset>
23 |         </form>
24 |       </div>
25 |     </div>
26 |   </div>
27 | </div>
28 | </template>
29 | 
30 | <script>
31 | export default {
32 |   data() {
33 |     return {
34 |       username: '',
35 |       email: '',
36 |       password: '',
37 |     };
38 |   },
39 |   methods: {
40 |     handleSignup() {
41 |       this.$axios.post('/users', {
42 |         user: {
43 |           username: this.username,
44 |           email: this.email,
45 |           password: this.password,
46 |         },
47 |       }).then(res => {
48 |         this.$store.commit('setUser', res.data.user);
49 |         this.$router.push('/');
50 |       });
51 |     },
52 |   },
53 | }
54 | </script>
55 | 


--------------------------------------------------------------------------------
/pages/settings.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 | <div class="settings-page">
  3 |   <div class="container page">
  4 |     <div class="row">
  5 |       <div class="col-md-6 offset-md-3 col-xs-12">
  6 |         <h1 class="text-xs-center">Your Settings</h1>
  7 |         <form>
  8 |           <fieldset>
  9 |             <fieldset class="form-group">
 10 |               <input v-model="image" type="text" class="form-control" placeholder="URL of profile picture">
 11 |             </fieldset>
 12 |             <fieldset class="form-group">
 13 |               <input v-model="username" type="text" class="form-control form-control-lg" placeholder="Username">
 14 |             </fieldset>
 15 |             <fieldset class="form-group">
 16 |               <textarea v-model="bio" class="form-control form-control-lg" rows="8" placeholder="Short bio about you"></textarea>
 17 |             </fieldset>
 18 |             <fieldset class="form-group">
 19 |               <input v-model="email" type="email" class="form-control form-control-lg" placeholder="Email">
 20 |             </fieldset>
 21 |             <fieldset class="form-group">
 22 |               <input type="password" class="form-control form-control-lg" placeholder="New Password">
 23 |             </fieldset>
 24 |             <button @click.stop.prevent="handleUpdateSettings" class="btn btn-lg btn-primary pull-xs-right" type="submit">
 25 |               Update Settings
 26 |             </button>
 27 |           </fieldset>
 28 |         </form>
 29 |         <hr>
 30 |         <button @click.stop.prevent="handleLogout" class="btn btn-outline-danger">
 31 |           Or click here to logout.
 32 |         </button>
 33 |       </div>
 34 |     </div>
 35 |   </div>
 36 | </div>
 37 | </template>
 38 | 
 39 | <script>
 40 | export default {
 41 | 
 42 |   data() {
 43 |     const user = this.$store.getters.user;
 44 |     if (!user) {
 45 |       this.$router.push('/login');
 46 |     }
 47 |     return {
 48 |       image: '',
 49 |       username: '',
 50 |       bio: '',
 51 |       email: '',
 52 |       password: '',
 53 |     }
 54 |   },
 55 | 
 56 |   mounted() {
 57 |     this.getSettings();
 58 |   },
 59 | 
 60 |   methods: {
 61 | 
 62 |     getSettings() {
 63 |       const user = this.$store.getters.user;
 64 |       if (!user) {
 65 |         this.$router.push('/login');
 66 |       }
 67 |       console.log(user.bio);
 68 |       this.image = user.image;
 69 |       this.username = user.username;
 70 |       this.bio = user.bio;
 71 |       this.email = user.email;
 72 |       this.password = '';
 73 |     },
 74 | 
 75 |     handleUpdateSettings() {
 76 |       const data = {
 77 |         user: {
 78 |           image: this.image,
 79 |           username: this.username,
 80 |           bio: this.bio,
 81 |           email: this.email,
 82 |         },
 83 |       };
 84 |       if (this.password) {
 85 |         data.user.password = this.password;
 86 |       }
 87 |       this.$axios.put(`/user`, data).then(res => {
 88 |         this.$store.commit('setUser', res.data.user);
 89 |         this.$router.push(`/profile/${res.data.user.username}`);
 90 |       });
 91 |     },
 92 | 
 93 |     handleLogout() {
 94 |       this.$store.commit('setUser', null);
 95 |       this.$router.push('/');
 96 |     },
 97 | 
 98 |   },
 99 | 
100 | }
101 | </script>
102 | 


--------------------------------------------------------------------------------
/plugins/axios.js:
--------------------------------------------------------------------------------
 1 | export default function({ $axios, redirect, store }) {
 2 |   $axios.defaults.baseURL = 'https://conduit.productionready.io/api';
 3 | 
 4 |   $axios.onRequest(config => {
 5 |     const user = store.getters.user;
 6 |     if (user && user.token) {
 7 |       config.headers['Authorization'] = `Token ${user.token}`;
 8 |     } else {
 9 |       delete config.headers['Authorization'];
10 |     }
11 |   });
12 | 
13 |   $axios.onError(error => {
14 |     const code = parseInt(error.response && error.response.status);
15 |     if (code === 401) {
16 |       console.log(401);
17 |       store.commit('setUser', null);
18 |       redirect('/login');
19 |     }
20 |   });
21 | 
22 | }
23 | 


--------------------------------------------------------------------------------
/static/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/anishkny/realworld-nuxt/003dcad27be7f3bb889a3ea0b117ce5714787d1c/static/favicon.ico


--------------------------------------------------------------------------------
/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vuex from 'vuex';
 2 | import axios from 'axios';
 3 | 
 4 | const createStore = () => {
 5 |   return new Vuex.Store({
 6 | 
 7 |     state: {
 8 |       user: getUserFromLocalStorage(),
 9 |     },
10 | 
11 |     mutations: {
12 |       setUser(state, user) {
13 |         localStorage.setItem('user', JSON.stringify(user));
14 |         state.user = user;
15 |         setAxiosAuthHeader(user);
16 |       },
17 |     },
18 | 
19 |     getters: {
20 |       user(state) {
21 |         return state.user;
22 |       }
23 |     },
24 | 
25 |   })
26 | };
27 | 
28 | export default createStore;
29 | 
30 | function getUserFromLocalStorage() {
31 |   let user = null;
32 |   try {
33 |     user = JSON.parse(localStorage.getItem('user'));
34 |     setAxiosAuthHeader(user);
35 |     return user;
36 |   } catch (ex) {
37 |     localStorage.setItem('user', null);
38 |     return null;
39 |   }
40 | }
41 | 
42 | function setAxiosAuthHeader(user) {
43 |   // if (user && user.token) {
44 |   //   axios.defaults.headers.common['Authorization'] = `Token ${user.token}`;
45 |   // } else {
46 |   //   delete axios.defaults.headers.common['Authorization'];
47 |   // }
48 | }
49 | 


--------------------------------------------------------------------------------