Sachin Ghait
    hero

    Table of contents

    Build a blog using Nuxt and Tailwind CSS

    In this post I will walk you through how I created this blog

    Frameworks used

    • Nuxt
    • Tailwind CSS
    • Tailblocks

    What is Nuxt ?

    Nuxt.js is a free and open source web application framework based on Vue.js, Node.js, Webpack and Babel.js. You can also create Static sites and server side rendered webapp with nuxt. It abstracts most of the complex configuration involved in managing things like asynchronous data, middleware, and routing.

    Create nuxt app

    Create nuxt app using below command

    yarn create nuxt-app <project-name>

    You can choose to add nuxt content module while project create. Or you can add it manually https://content.nuxtjs.org/installation

    yarn add @nuxt/content

    Adding ready to use CSS blocks from Tailblocks

    Navigate to https://tailblocks.cc/ Choose any header footer and content blocks you like. Add these blocks to nuxt layouts/default.vue file

    <div>
    <Header></Header>
    <Nuxt/>
    <Footer></Footer>
</div>

    <Nuxt/> will render pages as per routes. Add pages/index.vue and pages/blog/index.vue they will serve on / and /blog route. Put homepage content in pages/index.vue and blog layout in pages/blog/index.vue

    Writing Content

    create a content/ directory in your project:

    content/
  blogs/
    article-1.md
    article-2.md
  home.md

    In Each article.md file you can add your content as below

    ---
title: Introduction
description: Learn how to use @nuxt/content.
---
## Markdown content
more details...

    Display Blogs data

    You need to fetch all posts as below and display in your vue template

    async  asyncData({ $content }) {
    const  posts  =  await  $content('blog').fetch()
    return {
        posts,
    }
},

    posts variable will have all posts from that folder, you can loop over and display them in any format. There are various ready to use blocks here https://tailblocks.cc/

    Further you can create a pages/blog/_slug.vue this will show content for route /blog/article-1. You need to fetch individual post as below and display in your vue template

    async  asyncData({ $content, params }) {
    const  post  =  await  $content('blog', params.slug).fetch()
    return { post }
},

    Create a static build

    After you have created the blog setup, static build can be generated by using below command

    nuxt generate //or
npm run generate

    Bonus: Hosting on netlify

    You can easily host project from github on netlify.

    • Go to [www.netlify.com](http://www.netlify.com/) and login or signup.
    • Select “New site from git”.
    • Choose your provider (e.g. GitHub) — You may need to authenticate here.
    • Select the git repository you want to create a site from.
    • Select the branch you want to deploy from.
    • Choose any commands that need to be run. — in our case its npm run generate
    • Choose the directory that you will publish from. It will contain files such as index.html. — in our case its dist.
    • Select “Build Site”.

    Source code