[ Nuxt ] layout 사용법

2024. 11. 18. 22:00· Vue/Nuxt
728x90
 

layouts/ · Nuxt Directory Structure

Nuxt provides a layouts framework to extract common UI patterns into reusable layouts.

nuxt.com

 

layouts 디렉토리 생성 후 하위에 파일 생성

 

 

app.vue

<NuxtLayout name="container">
  <NuxtPage />
</NuxtLayout>

 

 

layouts/container.vue

<template>
  <main>
    <slot />
  </main>
</template>

slot 부분이 content가 들어갈 구역

 

 

 

728x90

'Vue > Nuxt' 카테고리의 다른 글

[ Nuxt ] 일부 페이지에는 Layout 적용 하지 않기  (0) 2024.12.19
[ Nuxt ] nuxt-dayjs 라이브러리 설치  (0) 2024.11.17
[ Nuxt ] nuxt/icon 사용하기 (iconify | 로컬 데이터셋)  (0) 2024.11.11
[ Nuxt, Tailwind ] custom color 적용 안 되는 이슈  (0) 2024.11.09
[ Nuxt, Tailwind ] custom color 적용  (0) 2024.11.08
'Vue/Nuxt' 카테고리의 다른 글
  • [ Nuxt ] 일부 페이지에는 Layout 적용 하지 않기
  • [ Nuxt ] nuxt-dayjs 라이브러리 설치
  • [ Nuxt ] nuxt/icon 사용하기 (iconify | 로컬 데이터셋)
  • [ Nuxt, Tailwind ] custom color 적용 안 되는 이슈
ZoD
ZoD
바쁘게 굴러가는 ZoD의 하루~
como siempre바쁘게 굴러가는 ZoD의 하루~
ZoD
como siempre
ZoD
  • 분류 전체보기 (173)
    • Daily (0)
    • Javascript (16)
      • 모던 자바스크립트 (46)
    • Typescript (8)
    • FrontEnd (7)
    • React (21)
      • tanstack query (1)
      • 라이브러리 (3)
    • Vue (33)
      • Nuxt (11)
      • Quasar (6)
    • CSS (12)
    • Storybook (8)
    • Figma (3)
    • CS 지식 (5)
    • Network (5)
    • 알고리즘 (2)
    • 사이드 프로젝트 (4)
      • ddangkong (4)
      • boncierge (0)
    • 개발, 근데 이제 헛소리를 곁들인 (1)
    • ETC (2)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

인기 글

최근 글

hELLO · Designed By 정상우.v4.2.2
ZoD
[ Nuxt ] layout 사용법
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.