코드/Nuxt3 3

[Vue] Router History mode & Hash mdode

Vue Router 에는 HTML 5 History mode와 Hash 모드 두 가지가 존재합니다.import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router';const router: Router = createRouter({ history: createWebHistory(), //history: createWebHashHistory(), routes: [ {name: 'home', path: '/', component: Home} ]}); 차이는 간단합니다URL 을 보면// web historyhttps://localhost:5173/brazil// hash historyhttps://localhost:5..

코드/Nuxt3 2024.11.12

[Nuxt3] auto import 설정

pinia 의 사용시 특정 pinia 함수들은 별도 import 선언문 없이 사용할수 있도록 처리한다.nuxt.config.ts 파일의 모듈 옵션을 변경export default defineNuxtConfig({ modules: [ ['@pinia/nuxt', {autoImports: ['defineStore', 'acceptHMRUpdate']}] ]}이런 식으로 선언 해주면 된다.autoImports 안의 함수명들에 대한 코드 제안을 보고 싶은데 뭔가 설정이 제대로 안되었는지 동작하지 않는다. 설정되고 나면export const useUser = defineStore('user', { state: () => { return { isLoggedIn: false, } },..

코드/Nuxt3 2024.09.03

[Nuxt3] useAsyncData, useFetch (feat, ofetch)

Nuxt3 의 useAsyncDAta와 useFetch 는 내부적으로 ofetch 라이브러리를 사용한다 unjs 라고 Nuxt 만의 JS 라이브러리 생태계를 만들어놨다...라이브러리들은 많지만 특별히 대단할건 없다. 하지만 알아 두면 좋을 것들이 많다. 이러나 저러나 Nuxt 내부적으로 사용되는 애들이니까. useAsyncData 나 useFetch 를 이용해서 비동기 통신을 할때 발생한 response error 를 처리해야하는 경우는 빈번하다.그럴경우 useAsyncData 와 useFetch 의 코드 작성 케이스는 다르다. const { data } = useAsyncData ( `${query}/{new Date().toString()}`, (): Promise => { ret..

코드/Nuxt3 2024.08.15