既有的 Nuxt 2 + Buefy 0.X + Axios 舊專案要升級到 Nuxt4 + Buefy 1.X 並改用 ofetch ，會需要一些設定調整。這邊筆記下執行上的注意事項。
內容
Buefy 0.X -> 3.0.X
1. 因 bulma 版本也提升到 1.X 版本，其寫法也配合 sass 2.X 將全域載入的 @import 改為區域載入 的 @use 和 @forward
2. Nuxt 版本無官方 module 整合，需自行撰寫如下：
|
1 2 3 4 5 |
import Buefy from 'buefy' export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.use(Buefy, {}) }) |
3. css 載入設定順序完整版示範如下：
如果 bulma/sass/utilities 本身無定義 !default，便不可寫在 with 中
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 |
@use 'initial-variables' as * @use 'bulma/sass/utilities' with ( $primary: $theme, $info: $grey, $success: $second, $warning: $hint, $danger: $warn, $light: $white-ter, $dark: $grey-darker, $white: #fff, $black: #000, // Typography $family-sans-serif: ( 'Roboto', blinkmacsystemfont, -apple-system, 'Segoe UI', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif, ), $family-monospace: monospace, $family-primary: ( 'Roboto', blinkmacsystemfont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif, ), // Font sizes $size-1: 3rem, $size-2: 2.5rem, $size-3: 2rem, $size-4: 1.5rem, $size-5: 1.25rem, $size-6: 1rem, $size-7: 0.85rem, // Font weights $weight-light: 300, $weight-normal: 400, $weight-medium: 500, $weight-semibold: 600, $weight-bold: 700, // Responsiveness $gap: 32px, $tablet: 769px, $desktop: 1024px, $widescreen: 1216px, $fullhd: 1408px, // Miscellaneous $radius-small: 2px, $radius: 4px, $radius-large: 8px, $radius-rounded: 9999px, $speed: 86ms ); // Import Bulma modules @use 'bulma/sass/themes'; @use 'bulma/sass/base'; @use 'bulma/sass/elements'; @use 'bulma/sass/form'; @use 'bulma/sass/components'; @use 'bulma/sass/grid'; @use 'bulma/sass/layout'; @use 'bulma/sass/base/skeleton'; @use 'bulma/sass/helpers'; // Import Mdi Font @use '@mdi/font/css/materialdesignicons.css'; // Import Buefy styles @use 'buefy/src/scss/buefy'; |
3. 只要是用 @use 開頭的，都是區域封閉的，不會污染全域。若你有想讓眾多 scss 都可僅由一個進入點引入，那可以使用 @forward。
Axios -> ofetch
自行建立一個 ofetch Client Instance，然後將此 ofetch Instance 傳入自行撰寫的 api 方法，統一帶入
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
import { HTTPMethod } from '~/types' import { getAuthHeaders } from '~/utils' import type { createHttpClient } from '~/utils/ofetch' export type StudentAPI = ReturnType<typeof createStudentAPI> export const createStudentAPI = (fetcher: ReturnType<typeof createHttpClient>) => { // api #18 const getStudentCourses = async () => { try { const res = await fetcher<Record<string, any>>({ method: HTTPMethod.GET, url: '/students/my-courses', headers: getAuthHeaders(), }) return [res, null] as const } catch (err) { return [null, err] as const } } // api #35 const getPerformance = async (courseName: string) => { try { const res = await fetcher<Record<string, any>>({ method: HTTPMethod.GET, url: `/students/performance/${courseName}`, headers: getAuthHeaders(), }) return [res, null] as const } catch (err) { return [null, err] as const } } return { getStudentCourses, getPerformance, } } /** create instance */ import type { $Fetch, FetchOptions } from 'ofetch' /** * Creates an HTTP request function using the provided fetcher. * @param fetcher An instance of $Fetch * @returns A function to make API requests. */ export const createHttpClient = (fetcher: $Fetch) => { return async function call<T>({ method, url, data, params, headers, fetchOptions, }: { method: string url: string data?: object params?: object headers?: Record<string, string> fetchOptions?: FetchOptions<'json'> }): Promise<T> { return fetcher<T>(url, { method, body: data ? JSON.stringify(data) : undefined, params: params || undefined, headers: { 'Content-Type': 'application/json;charset=utf-8', ...headers, }, onRequest: () => { // console.log('config on Req', req) }, onRequestError: () => { // console.log('config on Req Error', req) }, onResponse: () => { // console.log('config on Res', res) }, onResponseError: () => { // console.log('config on Res Error', res) }, ...fetchOptions, }) } } |
參考資料
1. Buefy With Sass
2. Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
