IT/Nuxt3
IT 및 일상을 공유합니다.
Nuxt3 Vuetify variables configFile 에러 해결 방법
Nuxt3 Vuetify settings.scss 설정 에러 Nuxt3 v3.9.3 vuetify v3.5.1 Nuxt3에서 vuetify 설치하고 settings.scss로 variables 설정을 아래처럼 진행했는데 //nuxt.config.ts import vuetify from 'vite-plugin-vuetify' import { createResolver } from '@nuxt/kit' const { resolve } = createResolver(import.meta.url) export default defineNuxtConfig({ css: [ 'vuetify/lib/styles/main.sass', '@mdi/font/css/materialdesignicons.min.css', ], ..
[Nuxt3] 클래스 기반 useFetch를 활용한 효율적인 API 호출
Nuxt 프로젝트를 진행하시는 분들은 아마도 API 통신을 위해 Axios를 주로 사용했을 것입니다. 그러나 Nuxt 3에서는 새로운 데이터 통신 방식을 권장하며, 이것이 바로 fetch입니다. 이번 글에서는 Nuxt 3에서의 데이터 요청을 위한 fetch 방식에 대해 자세히 알아보겠습니다. Nuxt3에서 useFetch 사용 Nuxt3 공식문서를 보면 useFetch 컴포저블을 사용하여 아래와 같은 형식으로 API 통신을 합니다. import { useFetch } from 'nuxt'; const { data, error } = useFetch('/api/data'); useFetch를 사용하면서 느꼈던 점은 HTTP 메서드(GET, POST, PUT, DELETE)를 분리해서 각각 재사용하면 코드의..
[Nuxt3] Nuxt3에서 Pinia 설치하고 사용해보자
Pinia란 Pinia는 2019년 11월경에 Composition API로 Vue용 스토어가 어떻게 생겼는지 재설계하기 위한 실험으로 시작되었습니다. Vue2와 Vue3 모두에게 작동 가능하고 구성된 요소/페이지 내부 상태를 공유할 수 있습니다. 그리고 Vuex와 유사하여 구현하기에 용이합니다. Pinia | The intuitive store for Vue.js Intuitive, type safe, light and flexible Store for Vue pinia.vuejs.org 개발 환경 2023년 8월 기준으로 Nuxt3와 pinia 환경에 대해서 설명합니다. nuxt 3.6.5 @pinia/nuxt 0.4.11 pinia 2.1.4 설치 방법 Nuxt3 프로젝트가 설치된 상태에서 시작합니..
[Nuxt3] vuetify3를 Nuxt3에 설치해보자
No match found for location with path "/_nuxt/%EF%BF%BDplugin-vuetify:components/VMain/VMain.sass vuetify 설정시 위에 에러로 고생하신다면 아래 해결방법을 통해서 다른방법으로 vuetify 설치와 설정을 하시면됩니다. 느린 개발자 Nuxt3 Vuetify variables configFile 에러 해결 방법 stack94.tistory.com Vuetify3 설치 이번 포스팅에서는 지난 시간 Eslint와 Prettier설정에 이어 Vue와 Nuxt에서 가장 많이 사용되고 유명한 UI 프레임워크인 Vueitfy에 대해서 설치 및 설정 방법에 대해서 적어볼까 합니다. 23.07월 기준 "nuxt": "^3.6.5", "vue..
[Nuxt3] EsLint Prettier 설치와 타입스크립트 설정해보기
Eslint & Prittier 라이브러리 설치하기 이번 포스팅에서는 Nuxt3에서 Eslint 와 Prittier 관련 라이브러리 설치와 .eslintrc.js 설정하는 방법 또는 타입스크립트 환경을 위한 tsconfig.json 옵션 설정에 대해서 간략하게 설명해볼까 합니다. package.json에서 Eslint와 Prettier 관련 모듈과 Typesciprt에 관한 Eslint plugin을 설치합니다. "devDependencies": { "@nuxt/devtools": "latest", "@nuxt/types": "^2.17.1", "@nuxtjs/eslint-config-typescript": "^12.0.0", "@types/node": "^18.16.19", "@typescript-es..
[Nuxt3] Nuxt3 시작해보자 (ft. 설치 & 환경)
이번에 소개드릴 내용은 Nuxt3입니다. 한 1~2년 정도 Nuxt2로 프로젝트를 진행했었는데요. Nuxt3 가 작년에 안정화가 됐더라도 아직은 시기상조라고 생각해서 그동안 Nuxt2에서만 프로젝트를 진행했었습니다 vue2문법으로 vuex 등 이렇게 쓰다가 vue3문법 사용해보고 싶어서 브리지도 설치해 봤는데 제가 설정을 잘 못한 건지 오류가 자꾸 나서 임시방편으로 Nuxt2에 Composition API 설치해 보고 Pinia 상태관리 모듈 한번 써보고, 컴포저블 여러 개 만들어보고 하다 보니 Nuxt3가 점점 업데이트되었더라고요. 올해에 vue2 수명 종료된다니.. 이번기회에 한번 Nuxt3로 환경설정부터 차근차근 진행하면서 포스팅을 써볼까 합니다. 2023.07.17일 기준) Nuxt 3.6 버전입..