728x90
공통으로 적용할 header, footer 같은것을 적용하기 위해서
layout을 설정한다.
현재버전의 Nuxt는 생성했을 때 layouts 설정이 되어있지 않으므로
루트 아래 layouts 폴더를 생성하고 그 아래여 default.vue 파일을 추가한다.
새로고침을 했을 때 적용되지 않는 경우가 있으므로 stop한 뒤 재가동시켜서 확인하면
아래 그림과 같이 Home, Videos가 화면 위에 나타나는 것을 확인할 수 있다.
기본 layout인 default 외에 다른 layout을 사용하려면 layouts 폴더에 추가한 뒤 사용한다.
우선 layouts/theatre_layout.vue 를 생성한다.
<div> 아래에 <nuxt/> 를 넣는다.
적용되었는지 확인을 위하여 바로위 div tab에 id를 주고 style에서 background color를 보라색으로 바꾼다.
이제 theatre_layout을 적용할 page를 생성한다.
/pages/theatre.vue 를 만들고
export 안에 layout에 사용할 layout 이름을 적어준다
export default { layout: 'theatre_layout' }
http://localhost:8000/theatre 를 실행하면
해당 style이 적용된 것을 확인할 수 있다.
728x90
