Nuxt.js는 Vue.js 프레임워크를 기반으로 하며, 기본적으로 Vue 템플릿 엔진을 사용합니다. 또한, Nuxt.js는 서버 사이드 렌더링(SSR)을 지원하므로, 템플릿 엔진을 선택할 때 SSR을 고려해야 합니다.

기본적으로 사용되는 Vue 템플릿 엔진

Nuxt.js의 기본 설정에서는 Vue 파일 내에서 <template> 태그를 사용하여 Vue 템플릿 엔진을 자동으로 사용합니다. 이는 Nuxt.js의 기본 설정이며, 추가적인 설정이 필요하지 않습니다.

다른 템플릿 엔진 사용하기

1. Pug 사용하기

   • 패키지 설치: 우선, pug 패키지를 프로젝트에 설치해야 합니다.

     npm install pug
     

   • Nuxt 구성 파일 수정: nuxt.config.js 파일 내에서 다음과 같이 Pug를 사용하도록 설정합니다.

     export default {
       // ...
       build: {
         extend(config, ctx) {
           config.module.rules.push({
             test: /\.pug$/,
             loader: 'pug-plain-loader',
             options: {
               data: // 사용할 데이터 객체
             }
           })
         }
       }
     }
     

2. Mustache 사용하기

   • 패키지 설치: 먼저, mustache 패키지를 프로젝트에 설치합니다.

     npm install mustache
     

   • Nuxt 구성 파일 수정: nuxt.config.js 파일에서 다음과 같이 Mustache를 사용하도록 설정합니다.

     export default {
       // ...
       build: {
         extend(config, ctx) {
           config.module.rules.push({
             test: /\.mustache$/,
             loader: 'mustache-loader',
             options: {
               // 사용할 옵션 설정
             }
           })
         }
       }
     }
     

결론

Nuxt.js에서는 기본적으로 Vue 템플릿 엔진을 사용하나, 필요에 따라 Pug 또는 Mustache와 같은 다른 템플릿 엔진을 사용할 수 있습니다. 다양한 프로젝트에 맞게 적절한 템플릿 엔진을 선택하여 사용하면 됩니다.