Nuxt3 폴더구조와 컴포넌트

2024. 7. 27.·🎨 프론트엔드 공부/Vue & Nuxt

< Nuxt 프로젝트 폴더 구조 (루트 경로 기준) >

📍app.vue

- Nuxt 프로젝트에서 진입점 역할을 함

- 여기에 직접 렌더링될 코드를 작성하면 모든 경로에서 보여짐

- NuxtPage 컴포넌트를 렌더링하여 pages 폴더에 만들어진 라우트들이 보여지게 할 수 있음

 

📍pages

- 폴더 기반 라우팅 기능 제공

- index.vue 에 작성하는 내용이 폴더의 기본 라우트 페이지가 됨

- 라우트명.vue 처럼 파일을 만들 수도 있음

 

< 컴포넌트 >

📍NuxtPage

- NuxtPage 컴포넌트를 app.vue 내부에서 호출하여  pages 폴더에 작성된 라우트가 나타나게 함

 

📍NuxtLink

- <a /> 역할을 수행하면서 성능상의 이점을 제공

- 이동 시 full page refresh를 방지하고 animated transition 효과를 제공

- 또한, 뷰포트에 NuxtLink 컴포넌트가 보이면, Nuxt가 백그라운드에서 prefetch 수행하여 빠른 네비게이션 가능

'🎨 프론트엔드 공부/Vue & Nuxt' 카테고리의 다른 글
  • [Vue.js] tutorial - 3. Attribute Bindings
  • [Vue.js] tutorial - 2. Declarative Rendering
  • [Vue.js] SFC(Single-File Component)
  • Vue.js & Nuxt 기초
지식물원
지식물원
지식이 자라는 식물원!
  • 지식물원
    지식물원
    지식물원
  • 전체
    오늘
    어제
    • 분류 전체보기 (510)
      • 🎨 프론트엔드 공부 (247)
        • JS & TS (86)
        • HTML & CSS (22)
        • React & Next (49)
        • Vue & Nuxt (22)
        • 기타 (68)
      • 🤓 기술 학습 & 공부 기록 (116)
        • Node.js (0)
        • Python (37)
        • 백엔드 (0)
        • 딥러닝 (1)
        • 컴퓨터 일반 (72)
        • 개발 인프라 (6)
      • 👨‍💻 프로젝트 경험 (6)
        • Work (0)
        • Toy (6)
      • ⚙️ 개발 팁 & 노하우 (21)
        • 프론트엔드 (6)
        • 기타 (15)
      • ☕️ 커리어 & 인터뷰 준비 (88)
        • 코딩 테스트 (88)
      • 📰 기술 트렌드 & 생각 정리 (4)
      • 📚 기타 (25)
        • 마케팅 (15)
        • 비개발서적 (10)
  • 블로그 메뉴

    • 태그
  • 링크

  • 공지사항

    • 모바일 접속 시 코드 하이라이팅 깨질 때
  • 인기 글

  • hELLO· Designed By정상우.v4.10.3
지식물원
Nuxt3 폴더구조와 컴포넌트
상단으로

티스토리툴바