Song Minu

패키지 설치 yarn, npm 중 본인의 환경에 맞는 걸로 설치한다. yarn add pinia @pinia/nuxt npm install pinia @pinia/nuxt nuxt.config.ts 수정 modules에 설치한 nuxt용 피니아를 적용시킨다. export default defineNuxtConfig({ modules: ['@pinia/nuxt'], }); 이러면 끝이다. nuxt 모듈 패키지라 적용방법이 쉽다. store 디렉터리 및 파일 추가 프로젝트 내부에 store 디렉터리를 추가한다. 그리고 그 안에 테스트를 위해 myStore.ts를 만들고 아래와 같이 소스코드를 작성한다. import { defineStore } from 'pinia'; export const useMyStor..

전에 vite, vue3, typescript와 파이어베이스를 이용해 프로젝트를 만들었었다.(https://minu0807.tistory.com/154) 최근 시간 날 때 nuxt3를 공식문서를 보면서 조금씩 이용해 보다가 vuefire라는 걸 이용해 파이어베이스를 쉽게 사용할 수 있는 것 같아 한 번 사용해보려고 했으나.... 생각보다 불편해서 그냥 firebase 패키지만 사용했다. 정확한 이유는 본문 맨 마지막에 작성... 이 글에서는 파이어베이스-파이어스토어에 있는 데이터를 가져오는 것까지만 작성했다. 본문에서 작업한 프로젝트는 https://minu0807.tistory.com/157 https://minu0807.tistory.com/158 [VueJS] Nuxt3 설치 및 layouts, p..

넉스트3를 하나하나 알아보기 위해 최근 설치했다. 알아보기 위해 설치했는데 컴포넌트나 디자인 같은 것들을 하나하나 만들기엔 너무 많은 시간이 소요될 것 같아 디자인 프레임워크를 찾아봤다. https://nuxt.com/modules?category=UI Modules · Nuxt Comprehensive UI toolkit for Vue.js and Nuxt.js that empowers you to build amazing user interfaces with ease. With Vunix, you can leverage the power of popular utility-first CSS frameworks like Tailwind CSS, Unocss, WindiCss, or use your own..

프로젝트 설치 npx nuxi init 공식문서에 나와 있는 설치 방법으로 설치를 하면 이렇게 생성이 된다. nuxt2에서는 설치 시 기본적인 디렉터리들을 생성해줬었는데 nuxt3는 없다. 처음 설치하고 봤을 때 조금 당황... 공식문서를 봐보면 layouts 규칙 적용 방법이 여러가지로 보이는데 nuxt2와 같은 형식으로 빠르게 적용 방법만 작성 layouts, pages 디렉터리 생성 먼저 app.vue는 삭제해버린 후 layouts, pages 디렉터리를 추가한다. layouts layouts 디렉터리 안에 기본 레이아웃 용 파일로 default.vue와 테스트를 위해 sub.vue 파일을 생성 후 아래와 같이 소스코드 작성 //default.vue default.vue //sub.vue sub.v..