CodeHoon

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다.

✔ 환경

Nuxt.js 3 에서 npm을 이용하여 pinia를 설치하는데 바로 오류가 출력되었습니다.

code ERESOLVE
ERESOLVE could not resolve
while resolving: undefined@undefined
....

✔ 해결방법부터...!

//package.json

"overrides": {
    "vue": "latest"
  },

이에 해당하는 내용을 추가해주시고, npm 을 이용하여 pinia를 재설치해주시면 됩니다!

✔ 서사

이번엔 Nuxt.js 3 에서 store 를 사용해보고자 pinia를 사용하게 되었습니다. 기존 Vue.js3 프로젝트에서는 그냥 vueStore를 사용했었는데, 그때 알게된 store 대체 라이브러리 PINIA🍈이번에는 사용해보자, 라고 생각해서 설치를 시작해보았습니다.

그리고 등장하게된 위의 에러.

예전에도 그렇고 이것과 유사하게 생긴 에러가 자주 등장하였었는데, 해결을 못하고 프로젝트를 지우곤 했었습니다 😢

그런데 우연찮게 Pinia 공식 문서에서 이에 대한 문구가 살짝 있는게 보이더라구요? (뭐지.. 다른데도 있나?)

감동😢

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다.

✔ 목표

Nuxt.js 3 - Vue.js3 에서 routing 하기 (페이지 전환)

✔ 환경

Nuxt.js3, Vue.js3

✔ 하는방법(결론) - 결론부터 말하기

// app.vue
<template>
  <div>
    <div class="header-area">
      <NuxtLink to="/">Main</NuxtLink>
      <NuxtLink to="/login">Login</NuxtLink> 
      <NuxtLink to="/register">Register</NuxtLink>
    </div>
    <NuxtPage />
  </div>
</template>

/app.vue (루트 경로) 에서 NuxtLink와 NuxtPage를 사용하기.

// /pages/index.vue
<template>
  <div>
    this is index view from pages
  </div>
</template>

/pages/index.vue 라는 파일이 있을 때 app.vue의 NuxtPage 가 /pages/index.vue 가 되는 것 입니다.

✔ Vue.js3 와 Nuxt.js 의 차이점

일반 Vue 프로젝트에서는 

1) main.js - route 사용 선언
2) App.vue - RouteLink, RouteView 로 작성

반면에 Nuxt 에서는 조금 다르더라구요.

처음에는 NuxtPage 말고  Nuxt  태그만 작성했다가 페이지 출력이 되지 않아서 왜 자꾸 안되지??? (여러 기술 블로그를 염탐했을 때) 하다가,
아래의 Nuxt.js3 강의를 올려주신 익숙하신 Vue 유튜버 링크(맨 아래 링크 첨부)에 들어가 빠르게 감아서 NuxtLink 부분만 보고 고치게되었습니다.

✔ 조금 더 나아가기 🚀

그렇다면 /pages/directory/directory/... 이런식으로 하위 폴더가 있을 때는 어떻게 해야할지 잠깐 생각해보았고,

Nuxt 프로젝트 특유의 경로 자동 감지를 생각하게 되어, 간단하게 구현하였습니다.

이렇게 슬래쉬로 하위 디렉터리 구분을 할 수 있었습니다. 

😎 마치며 

왜 이런 간단한 것 하나조차 Vue.js 프로젝트와 달라서 이렇게 애를 먹이는 것인지,,,
하나씩 그래서 설정하고 확인하고... 라우팅까지 신경쓰면서 살고 있네요.
기존에는 1분 걸릴게 Nuxt로 하니 10분도 넘게 찾고 있었네요.

어제는 프로젝트 만들고 띄우지도 못해서ㅋㅋㅋㅋ 지웠다가 새로운 프로젝트 생성하고 난리였습니다.

이상입니다.

안녕하세요 상훈입니다.

Nuxt 3 (+Vue 3) 와 Tailwindcss, typeScript로 프로젝트 생성시 정상적으로 안되는 경우가 있어 정상구동을 확인한 간단한 기초 내용을 포스팅하려고 합니다.

1) Nuxt.js 3
2) Vue.js 3
3) TailwindCss
4) TypeScript
5) Vue Router
6) Vuex
7) gh-pages

를 기본적으로 사용하려고 합니다. ( *5,6,7 은 선택사항 입니다.)

1. 디렉터리 구조

2. nuxt.config.ts

//nuxt.config.ts

export default defineNuxtConfig({
  css: ["~/assets/css/tailwind.css"],
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  },
});

3. postcss.config.js

//postcss.config.js

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

4. tailwind.config.js

// tailwind.config.js

module.exports = {
  content: [
    "./components/**/*.{js,vue,ts}",
    "./layouts/**/*.vue",
    "./pages/**/*.vue",
    "./plugins/**/*.{js,ts}",
    "./nuxt.config.{js,ts}",
    "./app.vue",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
};

5. tailwind.css (기호에 따라 파일명 설정 index.css, main.css 등)

// assets/css/tailwind.css

@tailwind base;
@tailwind components;
@tailwind utilities;

이렇게 설정하고 구동시 정상출력을 확인하였습니다.

안녕하세요 상훈입니다.

Nuxt 3.0 버전을 이용해 gh-page 를 사용하여 git hub page를 자동 배포되도록 설정하려고하는데,
deploy가 동작하지 않았습니다.

npm run deploy

> deploy
> gh-pages -d build

ENOENT: no such file or directory, stat ~

이 말인즉슨 해당 경로에 파일 혹은 폴더가 없다. 

라는 뜻인데요, 저희 프로젝트의 기본 경로를 보시면 동일한 경로가 없을 것으로 판단됩니다.

package.json을 확인해주시면,

"deploy" script 의  gh-pages -d .output/public  이라고 작성되어져있는데, 마지막 .output/public 은 빌드된 내용이 출력될 경로를 나타내줍니다.

그래서 만약! generate 를 안해주셨다면, npm run generate 를 먼저 해주세요.

저는 generate를 안했었기 때문에 경로가 존재하지않아 발생한 오류였습니다. dist 폴더 or public 폴더 등등

(그림에서 안내해준 내용을 잘 읽어보시면, pulbic 이 .output/public 에 생성되었다고 작성되어져있습니다.)
(추가 :  .output/public 을 정적배포가 가능하다고 출력되었습니다.)

이상입니다.

그리고 이제 deploy 를 해주면 됩니다.  npm run deploy 

결과적으로 업로드 성공되었습니다.

이상입니다. 감사합니다.

다음번에는 Action을 통해 자동으로 배포되도록 설정해보려고합니다.

안녕하세요 상훈입니다.

Nuxt.js 프로젝트를 생성하고 구동시키려는데, 아래와 같은 오류가 출력되면서 정상동작하지 않았습니다.

Error:0308010C:digital envelope routines::unsupported

그래서 확인을 해보니 Node 명령어를 변경하여 처리하라고 작성되어있더군요. 
결과는 실패. 

그래서 Node.js의 버전 자체를 낮추어 구동시키는 방법이 있다고 합니다.

현재 버전과 바꿀 버전은 아래와 같습니다.

현재는 18.12.1 버전을 사용하고있습니다. 
(2022-11-11 기준 안정(최신) 버전)

16버전에서만 Nuxt가 정상적으로 돌아간다는 말도 있었거든요.

처음에는 14버전도 깔아서 구동해보니 정상동작하였습니다. 
아무튼 16버전으로 깔도록하겠습니다.

아래의 사이트에서 

nvm-setup.zip (윈도우 기준) 을 다운로드 + 설치 해주세요.

그리고 vscode등을 재실행해줍니다. 

$ nvm

이렇게 되면 정상적으로 설치가된것입니다.

그리고 다운로드 > 리스트 확인 > 항목 사용을 눌러주세요.

// 16.13.0 버전 다운로드
nvm install 16.13.0

// 리스트 확인
nvm list  

// 16버전 사용하기
nvm use 16.13.0

설치가 완료되었고, 사용처리까지 하셨으면 이제 프로젝트 구동해주세요.

감사합니다.

도움이 되셨다면 광고 한번 클릭해주세요. 블로그 운영에 큰 힘이 됩니다. 감사합니다.

안녕하세요 상훈입니다.

Nuxt.js 에서 Components를 삽입하는 방법은 Vue.js 와 동일합니다. 

바로 App.vue |  Index.vue 에서 components를 넣는것이죠.

하지만, 차이점이 존재합니다. 

Vue.js -> Nuxt.js 에서는 import를 굳이 해줄 필요가 없습니다.

예시를 보여드리자면,

<Hero /> 컴포넌트를 삽입하였는데, script의 import가 존재하지 않는 것을 확인할 수 있습니다.

결과창에서도 Hero 컴포넌트가 잘 게시되어져 있는것을 확인 할 수 있습니다.

이게 가능한 이유는 Nuxt.config.js 에서 확인이 가능합니다.

해당 내용의 주석을 해석하자면, 자동으로 컴포넌트를 import 해주는 것입니다!

이상입니다.