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] devtools compilerOptions 에러 해결하기
Devtools란? Nuxt.js의 개발 도구를 활성화하는 옵션입니다. Nuxt.js는 개발 중에 개발자 도구를 사용하여 애플리케이션을 디버깅하고 모니터링하는 데 도움을 주는 내장된 개발 도구를 제공합니다. 해당 옵션을 true로 설정하면 개발 도구가 활성화되어 개발자 도구를 사용할 수 있습니다. 사용되는 예로는 주로 개발 중에 디버깅에 활용합니다. Vuex 또는 Pinia 상태 확인을 모니터링 가능 컴포넌트 구조 트리를 시각적으로 확인 가능 현재 활성화된 라우터 및 라우터 히스토리 확인 가능 개발 도구의 기능은 Nuxt.js 버전에 따라 다소 다를 수 있습니다. 또한, 개발 도구를 사용하기 위해서는 브라우저의 개발자 도구를 열어야 합니다. 주로 개발 환경에서만 사용하며, 프로덕션 환경에서는 비활성화하는..
[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 버전입..
[Nuxt] Nuxt2 환경에서 composition-API와 pinia 설정방법
안녕하세요. 한 주간 잘 지내셨나요? 22년 11월 Nuxt3 3.0 버전을 발표했는데요 그에 따라 nuxt2에서 nuxt3로 마이그레이션 하는 개발자 분들도 많아졌다고 생각합니다. 물론 아직 Nuxt3에서 지원되는 부분이 Nuxt2에 비해서 부족하다고 하지만 새로운 기능과 여러 요건들에 따라서 새로운 프로젝트를 시작하거나, nuxt3 기능을 맛볼 수 있는 nuxt Bridge 버전으로 마이그레이션 하시는 분들 또한 있을 겁니다. 이번 포스팅에서는 Nuxt Bridge를 제외하고 Vue 3.0에서 새롭게 도입된 Composition API 모듈을 사용가능하게 설정하는 방법과 Pinia라는 Vue 애플리케이션에서 상태 관리를 위한 라이브러리 또한 설정해 볼 겁니다. 컴포지션 API와 Typescript와 ..