Nuxt7 [Nuxt] Nuxt3에서 Pinia 사용하기 Pinia Vuex와 유사한 Vue의 상태관리 프레임워크입니다. Pinia를 사용한다면 구성 요소 및 페이지 간 상태를 공유할 수 있습니다. 사용 환경 Node Version: v16.13.1 Nuxt Version: 3.0.0-rc.9 Package Manager: yarn@1.22.17 Pinia 설치 pinia와 @pinia/nuxt를 설치해야 합니다. yarn add pinia @pinia/nuxt nuxt.config 설정 modules에 @pinia/nuxt만 추가하면 됩니다. import { defineNuxtConfig } from 'nuxt' export default defineNuxtConfig({ modules: [ '@pinia/nuxt', ], }) .. 2022. 9. 17. [Nuxt] Nuxt3 TypeError: Cannot read properties of null (reading 'parentNode') 문제 해결하기 개요 Nuxt3로 프론트엔드를 개발하던 중 다음과 같은 에러가 발생했습니다. TypeError: Cannot read properties of null (reading 'parentNode') 루트 페이지가 아닌 다른 페이지에서 새로고침을 한 다음에 vue-router를 사용(to 이용)할 때 해당 오류가 발생했습니다. 오류에 대한 자세한 내용은 nuxt3 issue에 있습니다. Nuxt3를 정적 웹 페이지 생성기로 사용하고 있습니다. SSR을 사용할 때는 아직 해당 이슈가 해결되지 않은 것으로 보입니다. 해결 방법 Nuxt3에는 정적 호스팅을 하는 2가지 방법이 있습니다. Prerendering client-side only rendering client-side only renderin.. 2022. 8. 11. [Nuxt] Nuxt3 + Vuetify 환경에서 vee-validate + yup으로 입력값 검증하기 개요 프론트에서도 입력값에 대한 검증을 하기 위해 vee-validate와 yup을 사용했습니다. vee-validate는 vue.js에서 form validation을 편하게 해주는 도구입니다. yup은 유효성 검사를 위한 스키마 빌더입니다. vuetify가 기본으로 제공하는 rules로도 유효성 검사를 할 수 있지만 일일히 rules를 만들기 복잡하고 관리하기 어렵기 때문에 vee-validate와 yup을 통해 유효성 검사를 간편하게 해보겠습니다. 기본적인 사용법과 vuetify랑 같이 사용하는 방법을 알아보겠습니다. 환경 "devDependencies": { "nuxt": "^3.0.0-rc.6" }, "dependencies": { "@mdi/font": "^6.9.96", "axios": "^.. 2022. 8. 10. [Nuxt] Nuxt3에서 pinia-plugin-persistedstate 사용하여 Pinia 상태 유지하기 pinia-plugin-persistedstate pinia로 상태 관리를 하는 경우 화면을 새로고침 할 때 store 안에 존재하는 값들이 초기화 된다. 이 때 로컬 스토리지를 이용하여 상태를 유지할 수 있는데 이를 간편하게 해주는 플러그인이다. vuex의 vuex-persistedstate와 유사하다. 설치 및 설정 방법 yarn add pinia-plugin-persistedstate 로컬 스토리지를 사용하도록 설정 // plugins/persistedstate.client.ts import { createPersistedState } from "pinia-plugin-persistedstate"; export default defineNuxtPlugin((nuxtApp) => { nuxtApp.$.. 2022. 8. 2. [Nuxt] Nuxt3에서 Windi CSS + Iconify 사용하기 Windi CSS Windy CSS는 CSS 프레임워크로 Tailwind CSS의 대안으로 소개되었다. 클래스 그루핑과 공통 클래스 선언을 할 수 있고 Tailwind보다 빌드 타임이 빠르다고 한다. 아래 설정한 내용은 Github에서 확인할 수 있다. Windi CSS 설치 nuxt-windicss와 animation을 위해 플러그인도 같이 설치했다. yarn add nuxt-windicss @windicss/plugin-animations nuxt.config 설정 buildModules에 nuxt-windicss를 추가해주면 된다. import { defineNuxtConfig } from 'nuxt3' export default defineNuxtConfig({ buildModule.. 2022. 7. 7. [Nuxt] Nuxt3에서 Vuetify + mdi 사용하기 Vuetify Vue.js 기반의 UI 프레임워크다. Material Design Spec에 따라 개발되었다. 현재 2.x.x 버전은 Vue3를 지원하지 않기 때문에 Nuxt3에서는 Vuetify 3버전 이상을 사용해야 한다. 아래 설정한 내용은 Github에서 확인할 수 있다. Vuetify 설치 sass와 vuetify 최신 버전을 설치해야 한다. yarn add vuetify@next sass 설치를 하고 나면 package.json파일이 아래와 유사한 형태가 될 것이다. { "private": true, "scripts": { "build": "nuxt build", "dev": "nuxt dev", "generate": "nuxt generate", "preview": "nuxt preview".. 2022. 7. 7. 이전 1 2 다음
