Nuxt3 Boilerplate #

export default defineNuxtConfig({
  // ...
  modules: ["@nuxt/eslint"],
});

// ...
const PROCESS_ENV = process.env;

export default defineNuxtConfig({
  // ...
  runtimeConfig: {
    port: PROCESS_ENV.PORT,
    public: {
      clientId: PROCESS_ENV.CLIENT_ID,
    },
  },
  devServer: {
    port: Number(PROCESS_ENV.PORT),
  },
});

// ...
export default defineNuxtConfig({
  // ...
  app: {
    head: {
      titleTemplate: "Nuxt3 Boilerplate - %s",
      charset: "utf-8",
      viewport: "width=device-width, initial-scale=1",
      htmlAttrs: { lang: "zh-CN" },
      meta: [{ name: "description", content: "Nuxt3 Boilerplate" }],
      link: [],
      script: [],
    },
  },
  // ...
});

// ...
export default defineNuxtConfig({
  // ...
  modules: [
    // ...
    "@pinia/nuxt",
    "@pinia-plugin-persistedstate/nuxt",
  ],
  // ...
});

import { defineStore } from "pinia";
import { ref } from "vue";

export default defineStore(
  "user",
  () => {
    const accessToken = ref("");
    const refreshToken = ref("");
    const tokenType = ref("");
    const user = ref<any>(null);
    const username = ref("");
    const email = ref("");
    const mobile = ref("");
    const isLogin = computed(() => Boolean(accessToken.value));
    const permissionCodeMap = computed(() => {
      return Object.fromEntries(
        (user.value?.permissionCodes ?? []).map((item) => [item, true])
      );
    });

    const login = (data) => {
      accessToken.value = data.access_token;
      refreshToken.value = data.refresh_token;
      tokenType.value = data.token_type;
    };

    const logout = () => {
      accessToken.value = "";
      refreshToken.value = "";
      tokenType.value = "";
      user.value = null;
    };

    return {
      accessToken,
      refreshToken,
      tokenType,
      user,
      username,
      email,
      mobile,
      isLogin,
      permissionCodeMap,
      login,
      logout,
    };
  },
  {
    persist: {
      paths: [
        "accessToken",
        "refreshToken",
        "tokenType",
        "username",
        "email",
        "mobile",
      ],
    },
  }
);

export { default as useUserStore } from "./user";

// ...
export default defineNuxtConfig({
  // ...
  modules: [
    // ...
    "dayjs-nuxt",
  ],
  dayjs: {
    locales: ["zh-cn", "en"],
    plugins: ["relativeTime", "utc", "timezone"],
    defaultLocale: "zh-cn",
    defaultTimezone: "UTC+8",
  },
  // ...
});

// ...
export default defineNuxtConfig({
  // ...
  modules: [
    // ...
    "@nuxtjs/tailwindcss",
  ],
  // ...
});

import type { Config } from 'tailwindcss'
import { namespace, defaultTheme } from './configs/theme'
import { addDynamicIconSelectors } from '@iconify/tailwind'

export default {
  content: [],
  theme: {
    extend: {
      colors: {
        [`${namespace}-primary`]: defaultTheme.primary.color['100'],
        [`${namespace}-primary-50`]: defaultTheme.primary.color['50'],
        [`${namespace}-primary-75`]: defaultTheme.primary.color['75'],
        [`${namespace}-primary-50a`]: defaultTheme.primary.color['50a'],
        [`${namespace}-primary-75a`]: defaultTheme.primary.color['75a'],
        [`${namespace}-white`]: defaultTheme.white.color['100'],
        [`${namespace}-white-50`]: defaultTheme.white.color['50'],
        [`${namespace}-white-75`]: defaultTheme.white.color['75'],
        [`${namespace}-white-50a`]: defaultTheme.white.color['50a'],
        [`${namespace}-white-75a`]: defaultTheme.white.color['75a'],
        [`${namespace}-black`]: defaultTheme.black.color['100'],
        [`${namespace}-black-50`]: defaultTheme.black.color['50'],
        [`${namespace}-black-75`]: defaultTheme.black.color['75'],
        [`${namespace}-black-50a`]: defaultTheme.black.color['50a'],
        [`${namespace}-black-75a`]: defaultTheme.black.color['75a'],
        [`${namespace}-gray`]: defaultTheme.gray.color['100'],
        [`${namespace}-gray-50`]: defaultTheme.gray.color['50'],
        [`${namespace}-gray-75`]: defaultTheme.gray.color['75'],
        [`${namespace}-gray-50a`]: defaultTheme.gray.color['50a'],
        [`${namespace}-gray-75a`]: defaultTheme.gray.color['75a'],
      },
    },
  },
  plugins: [addDynamicIconSelectors()],
} satisfies Config

// ...
export default defineNuxtConfig({
  // ...
  modules: [
    // ...
    "nuxt-swiper",
  ],
  // ...
});

// ...
export default defineNuxtConfig({
  // ...
  modules: [
    // ...
    "@ant-design-vue/nuxt",
  ],
  antd: {
    extractStyle: true,
  },
  // ...
});

// ...
export default defineNuxtConfig({
  // ...
  app: {
    // ...
    pageTransition: { name: "page", mode: "out-in" },
  },
  // ...
});

npm install consola

import { useDayjs } from "#dayjs";
import { consola } from "consola";
import { message as $message } from "ant-design-vue";
import { useUserStore } from "@/stores";

const dayjs = useDayjs();

interface IRequestOptions {
  /** 请求 URL */
  url: string;
  /** 请求基础 URL */
  baseURL?: string;
  /** 请求头 */
  headers?: object;
  /** 请求查询参数 */
  query?: object;
  /** 请求体 */
  body?: object;
}

interface ICreateRequestApiOptions {
  /** 基础 URL */
  baseURL?: string;
  /** 请求拦截器列表 */
  requestInterceptors?: ((config: any) => any)[];
}

/**
 * 创建请求
 * @param method 请求方式
 * @param createRequestApiOptions 选项
 */
function createRequest(
  method: "GET" | "POST" | "PATCH" | "DELETE",
  createRequestApiOptions: ICreateRequestApiOptions
) {
  return function <T = any>(requestOptions: IRequestOptions) {
    return new Promise<{
      code: number;
      message: string;
      data: T;
    }>((resolve, reject) => {
      const START_TIME = Date.now();
      const isClient = import.meta.client;
      const userStore = useUserStore();
      const { url, baseURL, body, query, headers } = requestOptions;
      let fetchOptions = {
        baseURL: baseURL || createRequestApiOptions.baseURL,
        url,
        method,
        body,
        query,
        headers: {
          Authorization: `${userStore.tokenType} ${userStore.accessToken}`,
          ...headers,
        },
      };

      // 执行请求拦截器列表
      if (createRequestApiOptions.requestInterceptors) {
        for (const fn of createRequestApiOptions.requestInterceptors) {
          fetchOptions = fn(fetchOptions);
        }
      }

      const sendHttpRequest = () => {
        const { url, ...options } = fetchOptions;
        const { baseURL } = options;

        return $fetch<{
          code: number;
          message: string;
          data: T;
        }>(url, options)
          .then((res) => {
            const { code, message } = res;
            const log = `${method} ${baseURL}${url} ${code} "${dayjs().format(
              "YYYY-MM-DD HH:mm:ss"
            )}" ${Date.now() - START_TIME}ms ${message}`;

            if (code === 200) {
              consola.success(log);
              resolve(res);
            } else if (code === 401 || code === 403) {
              consola.warn(log);

              if (isClient) {
                $message.warn(message);
              }

              if (code === 401) {
                if (isClient) {
                  userStore.logout();
                  navigateTo("/login");
                }
              }

              reject(res);
            } else {
              consola.error(log);

              if (isClient) {
                $message.error(message);
              }

              reject(res);
            }
          })
          .catch((error) => {
            consola.fail(
              `${method} ${baseURL}${url} - "${dayjs().format(
                "YYYY-MM-DD HH:mm:ss"
              )}" ${Date.now() - START_TIME}ms ${error}`
            );

            if (isClient) {
              $message.error(error.message);
            }

            reject(error);
          });
      };

      sendHttpRequest();
    });
  };
}

/**
 * 创建请求 api
 * @param options 创建请求 API 选项
 */
export default function createRequestApi(options: ICreateRequestApiOptions) {
  return {
    get: createRequest("GET", options),
    post: createRequest("POST", options),
    patch: createRequest("PATCH", options),
    delete: createRequest("DELETE", options),
  };
}

import createRequestApi from "./request";

export default createRequestApi({
  baseURL: "/api-sso",
});

// ...
export default defineNuxtConfig({
  // ...
  nitro: {
    routeRules: {
      "/api-sso/**": {
        proxy: `${PROCESS_ENV.SSO_BASE_URL}/**`,
      },
    },
  },
  // ...
});

import utilsRequestSso from "@/utils/request-sso";

export const getAuthProfile = (query = {}) => {
  // return utilsRequestSso.get({
  //   url: '/auth/profile',
  //   query,
  // })

  return Promise.resolve({
    code: 200,
    data: {
      id: "5",
      username: "read-only1",
      mobile: "18028592716",
      email: "811258684@qq.com",
      name: "游客1",
      sex: "MALE",
      enabled: true,
      birthday: "2024-10-11 00:00:00",
      createdAt: "2024-10-10 14:54:49",
      updatedAt: "2024-10-10 15:03:04",
      permissionCodes: [],
    },
    message: "操作成功",
  });
};

import type { RouteRecordName } from "#vue-router";
import { useUserStore } from "@/stores";
import * as apisSso from "@/apis/sso";

/** 无需登录的路由名称列表 */
const publicRouteNameList: RouteRecordName[] = [
  "login",
  "register",
  "forgot-pwd",
];

export default defineNuxtRouteMiddleware(async (to, from) => {
  const userStore = useUserStore();
  const qsIndex = from.fullPath.indexOf("?");
  const qs = qsIndex !== -1 ? from.fullPath.slice(qsIndex) : "";

  if (userStore.isLogin) {
    if (to.name === "login") {
      return navigateTo(`/${qs}`);
    }

    if (!userStore.user) {
      try {
        const res = await apisSso.getAuthProfile();
        userStore.user = res.data;
      } catch (error) {
        console.error("middleware auth error", error);
        userStore.logout();
        return navigateTo(`/login${qs}`);
      }
    }
  } else {
    if (!publicRouteNameList.includes(to.name)) {
      return navigateTo(`/login${qs}`);
    }
  }
});