Top Git Project

Freecodecamp

freeCodeCamp.org's open-source codebase and curriculum....

React

A declarative, efficient, and flexible JavaScript library...

Tensorflow

An Open Source Machine Learning Framework for Everyone

Bootstrap

The most popular HTML, CSS, and JavaScript framework for...

System design-primer

Learn how to design large-scale systems. Prep for the...

Ohmyzsh

🙃 A delightful community-driven (with 1900+...

Flutter

Flutter makes it easy and fast to build beautiful apps...

Javascript

JavaScript Style Guide

Python

All Algorithms implemented in Python

Javaguide

「Java学习+面试指南」一份涵盖大部分 Java 程序员所需要掌握的核心知识。准备 Java 面试,首选...

Create blog home page layout with nuxt - Part 2

Create simple blog page and categories with nuxt js and tailwind css

1. Create ./components/Header.vue

<template>
  <div class="w-full">
    <nav class="px-6 py-4 bg-white shadow">
      <div
        class="flex flex-col mx-auto md:flex-row md:items-center md:justify-between"
      >
        <div class="flex items-center justify-between">
          <div>
            <a href="#" class="text-xl font-bold text-gray-800 md:text-2xl"
              >Brand</a
            >
          </div>
          <div>
            <button
              type="button"
              class="block text-gray-800 hover:text-gray-600 focus:text-gray-600 focus:outline-none md:hidden"
            >
              <svg viewBox="0 0 24 24" class="w-6 h-6 fill-current">
                <path
                  d="M4 5h16a1 1 0 0 1 0 2H4a1 1 0 1 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2zm0 6h16a1 1 0 0 1 0 2H4a1 1 0 0 1 0-2z"
                ></path>
              </svg>
            </button>
          </div>
        </div>
        <div class="flex-col hidden md:flex md:flex-row md:-mx-4">
          <a
            href="#"
            class="my-1 text-gray-800 hover:text-blue-500 md:mx-4 md:my-0"
            >Home</a
          >
          <a
            href="#"
            class="my-1 text-gray-800 hover:text-blue-500 md:mx-4 md:my-0"
            >Blog</a
          >
          <a
            href="#"
            class="my-1 text-gray-800 hover:text-blue-500 md:mx-4 md:my-0"
            >About us</a
          >
        </div>
      </div>
    </nav>
  </div>
</template>

2. Create ./components/Footer.vue

<template>
  <div class="w-full">
    <footer class="px-6 py-2 text-gray-100 bg-gray-800">
      <div
        class="flex flex-col items-center justify-between mx-auto md:flex-row"
      >
        <a href="#" class="text-2xl font-bold">Brand</a>
        <p class="mt-2 md:mt-0">All rights reserved 2021.</p>
      </div>
    </footer>
  </div>
</template>

3. Create ./components/Right.vue

<template>
  <div class="hidden w-4/12 -mx-8 lg:block">
    <div class="px-8 mt-10">
      <h1 class="mb-4 text-xl font-bold text-gray-700">Categories</h1>
      <div
        class="flex flex-col max-w-sm px-4 py-6 mx-auto bg-white rounded-lg shadow-md"
      >
        <ul>
          <li>
            <a
              href="#"
              class="mx-1 font-bold text-gray-700 hover:text-gray-600 hover:underline"
              >- Vue js</a
            >
          </li>
          <li class="mt-2">
            <a
              href="#"
              class="mx-1 font-bold text-gray-700 hover:text-gray-600 hover:underline"
              >- Nuxt js</a
            >
          </li>
          <li class="mt-2">
            <a
              href="#"
              class="mx-1 font-bold text-gray-700 hover:text-gray-600 hover:underline"
              >- React js</a
            >
          </li>
          <li class="mt-2">
            <a
              href="#"
              class="mx-1 font-bold text-gray-700 hover:text-gray-600 hover:underline"
              >- Angular js</a
            >
          </li>
          <li class="flex items-center mt-2">
            <a
              href="#"
              class="mx-1 font-bold text-gray-700 hover:text-gray-600 hover:underline"
              >- Django</a
            >
          </li>
          <li class="flex items-center mt-2">
            <a
              href="#"
              class="mx-1 font-bold text-gray-700 hover:text-gray-600 hover:underline"
              >- Strapi</a
            >
          </li>
          <li class="flex items-center mt-2">
            <a
              href="#"
              class="mx-1 font-bold text-gray-700 hover:text-gray-600 hover:underline"
              >- Next js</a
            >
          </li>
        </ul>
      </div>
    </div>
    <div class="px-8 mt-10">
      <h1 class="mb-4 text-xl font-bold text-gray-700">Recent Post</h1>
      <div
        class="flex flex-col max-w-sm px-8 py-6 mx-auto bg-white rounded-lg shadow-md"
      >
        <div class="flex items-center">
          <a
            href="#"
            class="px-2 py-1 text-sm text-green-100 bg-gray-600 rounded hover:bg-gray-500"
            >Laravel</a
          >
        </div>
        <div class="mt-4">
          <a href="#" class="text-lg font-medium text-gray-700 hover:underline"
            >Build Your New Idea with Laravel Freamwork.</a
          >
        </div>
        <div class="flex items-center justify-between mt-4">
          <span class="text-sm font-light text-gray-600">Jun 1, 2021</span>
        </div>
      </div>
    </div>
  </div>
</template>

4. Create ./pages/index.vue

<template>
  <div class="w-full lg:w-8/12">
    <div class="mt-6" v-for="(item, index) of list" :key="index">
      <div class="max-w-4xl px-10 py-6 mx-auto bg-white rounded-lg shadow-md">
        <div class="flex items-center justify-between">
          <span class="font-light text-gray-600">Jun 1, 2020</span
          ><a
            href="#"
            class="px-2 py-1 font-bold text-gray-100 bg-gray-600 rounded hover:bg-gray-500"
            >{{ item.cat }}</a
          >
        </div>
        <div class="mt-2">
          <a
            href="#"
            class="text-2xl font-bold text-gray-700 hover:underline"
            >{{ `${item.title} ${item.cat}` }}</a
          >
          <p class="mt-2 text-gray-600">
            Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora
            expedita dicta totam aspernatur doloremque. Excepturi iste iusto eos
            enim reprehenderit nisi, accusamus delectus nihil quis facere in
            modi ratione libero!
          </p>
        </div>
        <div class="flex items-center justify-between mt-4">
          <a href="#" class="text-blue-500 hover:underline">Read more</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          title: "Build a web app with",
          cat: "Vue js",
        },
        {
          title: "Build a web app with",
          cat: "Nuxt js",
        },
        {
          title: "Build a web app with",
          cat: "React js",
        },
        {
          title: "Build a web app with",
          cat: "Angular js",
        },
      ],
    };
  },
};
</script>

5. Open and edit ./layouts/layouts.vue

<template>
  <div class="container flex-col justify-start mx-auto">
    <Header />
    <div class="w-full overflow-x-hidden bg-gray-100">
      <div class="p-4">
        <div class="flex justify-between mx-auto">
          <Nuxt />
          <Right />
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

Layout results

blogs.png

Install nuxtjs and tailwindcss - Part 1

Nuxt starter for creating a blog