Nuxt 레이아웃 동적 구성 하기

아래 명령어로 새 프로젝트를 생성 한다.

npx create-nuxt-app

Vuetify를 선택 해주는 것 외에는 본인 환경에 맞게 적당히 선택 해준다.

yarn dev로 서버를 실행 한다.

브라우저로 http://localhost:3000을 열어보면 아래와 같이 기본 페이지가 생성 되어 있다.

pages/index.vue파일을 열어 코드를 비워주자.

사이드바나 네비게이션 바 등은 layouts/default.vue에 정의 되어 있다.

개발자가 상황에 따라 여러 레이아웃을 사용 하는 경우도 있을 수 있다.

텅 비어있는 레이아웃을 한번 추가 해보자.

layouts/testlayaout.vue를 추가해주자.

index.vue파일에서 새 레이아웃을 지정 해준다.

네비게이션 메뉴가 전부 사라진 것을 알 수 있다.

이제는 버튼을 2개 넣어 놓고 동적으로 레이아웃을 변경 해보자.

index.vue

<template>
  <v-row justify="center" align="center">
    <v-col cols="12" sm="8" md="6">
      <v-card class="logo py-4 d-flex justify-center">
        <v-card-subtitle>레이아웃 테스트</v-card-subtitle>
        <v-card-actions>
          <v-spacer />
          <v-btn @click="foo1()">레이아웃1</v-btn>
          <v-btn @click="foo2()">레이아웃2</v-btn>
        </v-card-actions>
      </v-card>
    </v-col>
  </v-row>
</template>

<script>
export default {
  name: "index",
  layout: "default",
  data: () => ({}),
  methods: {
    foo1() {
      this.$router.replace("/");
    },
    foo2() {
      this.$router.replace("/index2");
    }
  }
};
</script>

index2.vue 파일을 추가 하고 같은 내용을, 하지만 layout은 testlayout으로 변경 해보자.

<template>
  <v-row justify="center" align="center">
    <v-col cols="12" sm="8" md="6">
      <v-card class="logo py-4 d-flex justify-center">
        <v-card-subtitle>레이아웃 테스트</v-card-subtitle>
        <v-card-actions>
          <v-spacer />
          <v-btn @click="foo1()">레이아웃1</v-btn>
          <v-btn @click="foo2()">레이아웃2</v-btn>
        </v-card-actions>
      </v-card>
    </v-col>
  </v-row>
</template>

<script>
export default {
  name: "index2",
  layout: "testlayout",
  data: () => ({}),
  methods: {
    foo1() {
      this.$router.replace("/");
    },
    foo2() {
      this.$router.replace("/index2");
    }
  }
};
</script>

웹브라우저에서 버튼을 클릭 해보면 UI가 변경 되는 효과를 확인 할 수 있다.