Nuxt.js Fundamental ตอนที่ 12 - ทำ Workshop เว็บ Portfolio

npx create-nuxt-app nuxt-portfolio

? Project name: nuxt-portfolio
? Programming language: JavaScript
? Package manager: Npm
? UI framework: Bulma
? Nuxt.js modules: Axios, Content
? Linting tools: ESLint, Prettier
? Testing framework: Jest
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Static (Static/JAMStack hosting)
? Development tools: -

cd nuxt-portfolio
npm run dev

---
title: Create blog with Nuxt.js
description: 'ลองสร้างไฟล์ Markdown ด้วย @nuxt/content และทำเป็น blog เพื่อไปแสดงหน้า blog'
createdAt: '2020-08-16T01:58:51+07:00'
---

สวัสดีครับ

บล้อกนี้เขียนด้วย `@nuxt/content` โดยใช้ Markdown

    ```js
    const hello = (name = 'Devahoy') => console.log(`Hello World!, ${name}`)

    hello()
    hello('John Doe')
    ```

ใส่ Link [Devahoy](https://devahoy.com)

<template>
  <div class="container mt-4">
    <div class="columns is-multiline">
      <div class="column is-4" v-for="post in posts" :key="post.slug">
        <div class="card">
          <div class="card-content">
            <nuxt-link :to="`/blog/${post.slug}`" class="title">{{ post.title }}</nuxt-link>
            <p>{{ post.description }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    async asyncData({ $content }) {
      const posts = await $content('blog').sortBy('createdAt', 'asc').fetch();

      return { posts };
    }
  };
</script>

<style scoped>
  .card {
    min-height: 250px;
    max-height: 250px;
    padding: 1em;
    overflow: scroll;
  }
</style>

<template>
  <div class="container">
    <article>
      <h1 class="title">{{ post.title }}</h1>
      <nuxt-content :document="post" />
    </article>
  </div>
</template>

<script>
  export default {
    async asyncData({ $content, params }) {
      const post = await $content('blog', params.slug).fetch();

      return {
        post
      };
    }
  };
</script>

<template>
  <nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
      <nuxt-link class="navbar-item" to="/"> Nuxt Portfolio </nuxt-link>

      <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false">
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
        <span aria-hidden="true"></span>
      </a>
    </div>

    <div class="navbar-menu">
      <div class="navbar-start">
        <nuxt-link class="navbar-item" to="/"> Home </nuxt-link>

        <nuxt-link to="/blog" class="navbar-item"> Blog </nuxt-link>

        <nuxt-link to="/profile" class="navbar-item"> Profile </nuxt-link>
      </div>

      <div class="navbar-end">
        <div class="navbar-item">
          <div class="buttons">
            <nuxt-link to="/login" class="button is-primary">
              <strong>Login</strong>
            </nuxt-link>
          </div>
        </div>
      </div>
    </div>
  </nav>
</template>

<script>
  export default {};
</script>

<template>
  <div>
    <Navbar />
    <Nuxt />
  </div>
</template>

<template>
  <div class="has-text-centered container">
    <h2 class="title">My Profile</h2>

    <img :src="user.avatar_url" class="avatar" />

    <p>Name : {{ user.name }}</p>
    <p>Location : {{ user.location }}</p>

    <div class="columns is-multiline my-4">
      <div class="column is-3" v-for="repo in repos" :key="repo.id">
        <div class="card">
          <div class="card-content">
            <a :href="repo.html_url" target="_blank" rel="noopener noreferrer ">{{ repo.name }}</a>
            <p>Star : {{ repo.stargazers_count }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    async asyncData({ $axios }) {
      const [user, repos] = await Promise.all([
        $axios.$get('https://api.github.com/users/phonbopit'),
        $axios.$get('https://api.github.com/users/phonbopit/repos?sort=pushed&per_page=100')
      ]);

      return { user, repos };
    }
  };
</script>

<style scoped>
  .avatar {
    width: 80px;
  }
</style>

npm install @nuxtjs/auth

  modules: [
    // Doc: https://github.com/nuxt-community/modules/tree/master/packages/bulma
    '@nuxtjs/bulma',
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
    // Doc: https://github.com/nuxt/content
    '@nuxt/content',
    '@nuxtjs/auth'
  ],

    auth: {
    strategies: {
      local: {
        endpoints: {
          login: { url: 'login', method: 'post', propertyName: 'data.token' },
          user: { url: 'me', method: 'get', propertyName: 'data.user' },
          logout: false
        }
      }
    }
  }

export const state = () => ({
  title: 'Nuxt.js Fundamental by DEVAHOY'
});

const express = require('express');
const cors = require('cors');
const app = express();
const router = express.Router();
app.use(cors());
app.use(express.json());
const user = {
  id: 1,
  username: 'john',
  email: 'john@doe.com',
  name: 'John Doe'
};
router.get('/me', (req, res) => {
  return res.json({
    data: {
      user
    }
  });
});
router.post('/login', (req, res) => {
  const { email, password } = req.body;
  // query db.
  if (email === 'admin@admin.com' && password === '123456') {
    return res.json({
      data: {
        user,
        token: 'THIS_IS_TOKEN'
      }
    });
  } else {
    return res.status(401).json({
      message: 'Invalid Password'
    });
  }
});
app.use('/api', router);
app.listen(12345, () => {
  console.log('Mock API start on port 12345');
});

npm install express cors

node server.js

<template>
  <div class="container">
    <form class="form" @submit="onSubmit">
      <h3 class="title">Log In</h3>
      <div class="field">
        <p class="control">
          <input v-model="email" class="input" type="email" placeholder="Email" />
        </p>
      </div>
      <div class="field">
        <p class="control">
          <input v-model="password" class="input" type="password" placeholder="Password" />
        </p>
      </div>

      <div class="field">
        <button type="submit" class="button is-primary is-fullwidth">Login</button>
      </div>

      <div class="field">
        <p v-if="error" class="notification is-danger">{{ error.message }}</p>
      </div>
    </form>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        email: '',
        password: '',
        error: null
      };
    },
    methods: {
      async onSubmit(e) {
        e.preventDefault();

        const payload = {
          data: {
            email: this.email,
            password: this.password
          }
        };

        try {
          await this.$auth.loginWith('local', payload);
          this.$router.push('/');
        } catch (error) {
          this.error = error;
        }
      }
    }
  };
</script>

<style scoped>
  .container {
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  .form {
    width: 240px;
  }
</style>

this.$auth.loginWith('local', payload);

export default { middleware: 'auth' }

export default function ({ store, redirect }) {
  if (store.state.isLoggedIn) {
    return redirect('/');
  }
}

export default {
  middleware: 'isLoggedIn`
}

$axios.setHeader('Authorization', null);

<div class="navbar-start">
  <nuxt-link class="navbar-item" to="/"> Home </nuxt-link>

  <nuxt-link to="/blog" class="navbar-item"> Blog </nuxt-link>

  <nuxt-link to="/photos" class="navbar-item"> Photos </nuxt-link>

  <nuxt-link to="/profile" class="navbar-item"> Profile </nuxt-link>
</div>

export default { data() { return { showNav: false } } }

<a
  role="button"
  class="navbar-burger burger"
  aria-label="menu"
  aria-expanded="false"
+ @click="showNav = !showNav"
>
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
</a>

<a
  role="button"
  class="navbar-burger burger"
  aria-label="menu"
  aria-expanded="false"
  @click="showNav = !showNav"
+ :class="{ 'is-active': showNav }"
>
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
</a>

+ <div class="navbar-menu" :class="{ 'is-active': showNav }">
  <div class="navbar-start">
    <nuxt-link class="navbar-item" to="/">
      Home
    </nuxt-link>

    <nuxt-link to="/blog" class="navbar-item">
      Blog
    </nuxt-link>

    <nuxt-link to="/profile" class="navbar-item">
      Profile
    </nuxt-link>
  </div>
</div>

head: {
  titleTemplate: 'Nuxt.js Fundamental - %s',
  title: 'Nuxt.js Fundamental',
  meta: [
    { charset: 'utf-8' },
    { name: 'viewport', content: 'width=device-width, initial-scale=1' },
    { hid: 'description', name: 'description', content: 'Meta description' }
  ]
}

export default {
  head() {
    return {
      title: 'Nuxt Portfolio',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: 'Nuxt.js Workshop - Building Portfolio with Nuxt.js'
        }
      ]
    };
  }
};

export default {
  head() {
    return {
      title: 'Nuxt Portfolio',
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: 'Nuxt.js Workshop - Building Portfolio with Nuxt.js'
        }
      ]
    }
  },
  async asyncData({ $axios }) {
    ...

    const title = `Profile of ${user.name}`;
    const description = `Profile from Github API for ${user.name}`
    return { user, repos, title, description }
  }
}

export default {
  serverMiddleware: ['~/api/auth.js']
};

const express = require('express');
const cors = require('cors');
const app = express();
const router = express.Router();
app.use(cors());
app.use(express.json());
const user = {
  id: 1,
  username: 'john',
  email: 'john@doe.com',
  name: 'John Doe'
};
router.get('/me', (req, res) => {
  return res.json({
    data: {
      user
    }
  });
});
router.post('/login', (req, res) => {
  const { email, password } = req.body;
  // query db.
  if (email === 'admin@admin.com' && password === '123456') {
    return res.json({
      data: {
        user,
        token: 'THIS_IS_TOKEN'
      }
    });
  } else {
    return res.status(401).json({
      message: 'Invalid Password'
    });
  }
});
app.use(router);
module.exports = {
  path: '/api',
  handler: app
};

axios: {
  baseURL: 'http://localhost:3000/api';
}

heroku git:remote -a <YOUR_APP_NAME>

git add .
git commit -am "deploy to heroku"
git push heroku master

axios: {
  baseURL: 'https://your-heroku-app.herokuapp.com/api';
}