#1 feat(article): Added article page and links to post

front-end/components/ArticlePost.vue

@@ -4,8 +4,10 @@
       <v-list-item-avatar color="grey">
         <img src="https://randomuser.me/api/portraits/men/81.jpg" />
       </v-list-item-avatar>
-      <v-list-item-content>
-        <v-list-item-title class="headline">{{ articleTitle }}</v-list-item-title>
+      <v-list-item-content class="color">
+        <nuxt-link :to="'/articles/'+articleSlug">
+          <v-list-item-title class="headline">{{ articleTitle }}</v-list-item-title>
+        </nuxt-link>
         <v-list-item-subtitle>by {{ articleAuthor }}</v-list-item-subtitle>
       </v-list-item-content>
     </v-list-item>
@@ -23,10 +25,17 @@
 <script>
 export default {
   props: {
+    articleSlug: String,
     articleAuthor: String,
     articleTitle: String,
     articleBody: String,
     articleTags: Array
   }
 }
-</script>
+</script>
+
+<style>
+.color a {
+  color: black;
+}
+</style>

front-end/layouts/article.vue

@@ -0,0 +1,38 @@
+<template>
+  <v-app>
+    <v-app-bar class="cyan accent-3 color" flat app>
+      <nuxt-link to="/">
+        <v-toolbar-title class="text-uppercase">Artic</v-toolbar-title>
+      </nuxt-link>
+
+      <v-spacer></v-spacer>
+
+      <div v-if="$auth.loggedIn">
+        <v-btn @click="$auth.logout()">Logout</v-btn>
+        <nuxt-link to="/dashboard">
+          <v-btn>Dashboard</v-btn>
+        </nuxt-link>
+      </div>
+      <nuxt-link to="/login" v-else>
+        <v-btn>Login</v-btn>
+      </nuxt-link>
+    </v-app-bar>
+    <v-main>
+      <v-content>
+        <nuxt />
+      </v-content>
+    </v-main>
+  </v-app>
+</template>
+
+<script>
+export default {
+  data: () => ({})
+}
+</script>
+
+<style>
+.color a {
+  color: black;
+}
+</style>

front-end/pages/articles/_slug.vue

@@ -0,0 +1,59 @@
+<template>
+  <v-container>
+    <v-row>
+      <article-post
+        :articleTitle="article.title"
+        :articleSlug="article.slug"
+        :articleAuthor="article.author.name"
+        :articleBody="article.body"
+        :articleTags="article.tags"
+      />
+    </v-row>
+  </v-container>
+</template>
+
+<script>
+import ArticlePost from '@/components/ArticlePost'
+
+export default {
+  layout: 'article',
+  components: {
+    ArticlePost
+  },
+
+  mounted() {
+    this.loadArticle()
+  },
+
+  data: () => ({
+    loading: false,
+    article: {
+      author: {} // defined author because :artucleAuthor won't accept undefined
+    },
+    tags: []
+  }),
+
+  computed: {
+    params() {
+      return this.$route.params
+    }
+  },
+
+  methods: {
+    async loadArticle() {
+      this.loading = true
+      await this.$axios
+        .get(`articles/${this.params.slug}`)
+        .then((response) => {
+          console.log(response.data)
+          this.article = response.data
+          this.loading = false
+        })
+        .catch((err) => {
+          console.log(err.response)
+          this.loading = false
+        })
+    }
+  }
+}
+</script>

front-end/pages/index.vue

@@ -6,6 +6,7 @@
           v-for="article in newArticles"
           :key="article.id"
           :articleTitle="article.title"
+          :articleSlug="article.slug"
           :articleAuthor="article.author.name"
           :articleBody="article.body"
           :articleTags="article.tags"
@@ -16,6 +17,7 @@
           v-for="article in hotArticles"
           :key="article.id"
           :articleTitle="article.title"
+          :articleSlug="article.slug"
           :articleAuthor="article.author.name"
           :articleBody="article.body"
           :articleTags="article.tags"
@@ -26,6 +28,7 @@
           v-for="article in allArticles"
           :key="article.id"
           :articleTitle="article.title"
+          :articleSlug="article.slug"
           :articleAuthor="article.author.name"
           :articleBody="article.body"
           :articleTags="article.tags"