[Nuxt.js]Components 적용 방법 #vue

Nuxt.js를 사용하면 편한점이 많이 있는데 이번에는 components를 사용하는 법을 알아보겠습니다.

실습순서

1. components 폴더 생성
2. component 파일 생성
3. 기본 component 호출
4. 다른 호출 방법

components 폴더 생성

• root 아래에 components 폴더를 생성합니다. Nuxt를 설치하게되면 기본 패키지 구성으로 폴더가 생성되어 있을겁니다.(~/components)

component 파일 생성

• 테스트를 위해 components/dept1/dept2/component-test.vue 생성

~/components/dept1/dept2/component-test.vue

<template>  
    <div>  
        컴포넌트 입니다.  
    </div>  
</template>

기본 component 호출

• pages에 파일을 생성한 후 component를 호출합니다.
• 별도의 선언이나 라우팅 없이 생성한 component파일 위치를 형식에 맞게 넣어주면 됩니다.
• components폴더 아래에 dept1/dept2/component-test.vue 파일이 있다면 이처럼 dept1-dept2-component-test 작성해 주면 됩니다. 폴더간 구별은 '-'를 이용하거나 앞글자를 대문자로 표기할 수 있습니다.
• dept1Dept2-component-test
• dept1-dept2Component-test
• dept1Dept2Component-test
• dept1Dept2ComponentTest
  이렇게 모두 가능 합니다. component-test.vue는 하나의 단어이지만 '-'를 대문자로 표기해도 문제가 없습니다. 이는 nuxt.js에서 지원하는 형식중 하나 입니다.

~/pages/test-page.vue

<template>  
    <div>  
        <dept1-dept2-component-test></dept1-dept2-component-test>  
    </div>  
</template>  
<script>  
    export default {  
        layout: 'test'  
    }  
</script>

다른 호출 방법

• 이렇게 호출을 하려다 보니 태그가 너무 길어져 가독성이 떨어져 보일 수 있습니다. 이런경우 component에 이름을 부여해 해당 이름으로 태그를 만드는 방법이 있습니다.

~/components/dept1/dept2/component-test.vue

<template>  
    <div>  
        컴포넌트 입니다.  
    </div>  
</template>  
<script>  
    export default {  
        name: 'nameTest'  
    }  
</script>

~/pages/test-page.vue

<template>  
    <div>  
        <name-test></name-test>  
    </div>  
</template>  
<script>  
    import NameTest from "~/components/dept1/dept2/component-test.vue";  

    export default {  
        components: {NameTest}, 
        layout: 'test'  
    }  
</script>

• component.vue 파일에 name을 지정하지 않아도 script에 imoprt만 해주면 원하는 이름의 tag로 사용이 가능합니다. 하지만 conponent.vue파일에 name을 지정해주면 태그를 작성할 때에 아래의 사진 처럼 자동완성이 가능하고 import 코드까지 자동으로 작성 해 줍니다.