build a simple initial loading before entering page with Nuxt3 and Go

Preface

My dear, a php developer asked me how to build loading effect before page shown.It seems that she had a trouble on her job.She didn’t know how to do that.Therefore she inspired me to write this article.That is time to tell her how to do.

.
├── go.mod
├── go.sum
├── main.go
└── testpage
    ├── README.md
    ├── app.vue
    ├── composables
    │   └── useGetFetchApi.ts
    ├── nuxt.config.ts
    ├── package.json
    ├── pages
    │   └── index.vue
    ├── pnpm-lock.yaml
    ├── public
    │   └── favicon.ico
    ├── server
    │   └── tsconfig.json
    ├── tsconfig.json
    └── unocss.config.ts

This structure is all project folder structure.Let’s move on

build backend part

we need to sample a simple code to get api.My purpose is to get api and then response hello page text on screen.To loading more time we set loading time more than 3 second.

The following code fulfill backend part at main.go

package main

import (
 "net/http"
 "time"

 "github.com/gin-gonic/gin"
)

func CorsMiddleware() gin.HandlerFunc {
 return func(ctx *gin.Context) {
  ctx.Writer.Header().Set("Access-Control-Allow-Origin", "*")
  ctx.Writer.Header().Set("Access-Control-Allow-Credentials", "true")
  ctx.Writer.Header().Set("Access-Control-Allow-Methods", "GET, OPTIONS")
  ctx.Writer.Header().Set("Access-Control-Allow-Headers", "Authorization, Content-Type, Content-Length, Cache-Contorl, Accept, Accept-Encodings, X-CSRF-Token, X-http-Requested, Origin")

  if ctx.Request.Method == http.MethodOptions {
   ctx.AbortWithStatus(http.StatusNoContent)
   return
  }
  ctx.Next()
 }
}

func main() {
 router := gin.Default()
 router.Use(CorsMiddleware())
 router.GET("/", func(ctx *gin.Context) {
  time.Sleep(3 * time.Second)
  ctx.String(http.StatusOK, "hello page")
 })
 router.Run()
}

remember

go mod init go get github.com/gin-gonic/gin

I use gin to fulfill this.

frontend part

We finish frontend part with Nuxt 3. And we also use unocss to make my page more beautiful.My purpose is to fetch backend request and get Response and then show on page.When pending period we show a loading effect.

• start nuxt 3 project

pnpx nuxi init frontend-part

• install unocss

pnpm install unocss @unocss/nuxt

• we need beautiful loading icons from iconify

I choose this one. People can choose another.

pnpm install @iconify-json/eos-icons

And adjust next.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: [
    '@unocss/nuxt',
  ]
})

and app.vue

<template>
  <NuxtPage />
</template>

<style>
html, body {
  margin: 0;
  padding: 0;
}
</style>

build composables/useGetFetchApi.ts I build all fetch code here.

export const useGetFetchApi = () => {
  const {
    data: helloPageRef,
    pending: helloPagePendingRef,
  } = useLazyFetch('/', {
    baseURL: 'http://localhost:8080',
    method: 'GET',
    server: false,
    redirect: 'follow',
  });

  return {
    helloPageRef,
    helloPagePendingRef,
  }
}

Now I import this fetch on my page
remember to create pages/index.vue

<script setup lang="ts">
  const {
    helloPageRef,
    helloPagePendingRef,
  } = useGetFetchApi();

</script>
<template>
  <div 
    w="full"
    h="screen"
    bg="blue-200"
    flex
    items-center
    justify-center
    v-if="helloPagePendingRef">
      <div class="i-eos-icons-loading" w-64 h-64 text="black"></div>
  </div>
  <div v-else>
    {{ helloPageRef }}
  </div>
</template>

I use unocss presetAttributify That is why I can use

<div 
    w="full"
    h="screen"
    bg="blue-200"
    flex
    items-center
    justify-center
    v-if="helloPagePendingRef">
      <div class="i-eos-icons-loading" w-64 h-64 text="black"></div>
  </div>

this pattern

my unocss.config.ts

import { defineConfig, presetAttributify, presetIcons, presetUno } from 'unocss'

export default defineConfig({
  presets: [
    presetUno(),
    presetIcons({ scale: 1.2 }),
    presetAttributify(),
  ]
})

Finally all done!

time to test it

• start backend server

go run main.go

• start frontend

cd testPage && pnpm dev

Our page