(09) Nuxt에서 Vuetify 사용하기

안녕하세요? 오늘은 Nuxt.js 프로젝트에서 Vuetify.js 를 쓰는 방법에 대해 포스팅을 하기로 마음먹었다. 갑자기 왜냐하면 내가 이걸 하는데 굉장히 애를 먹었기 때문이다. 알고보면 정말 너무나 별거 아니지만 그래도 훗날의 나, 혹은 어쩌면 이걸 볼지도 모를 나같은 쌩초보자에게 혹시 도움이 될까 싶어서 글을 쓰기로 했다.

들어가기 전에 Nuxt와 Vuetify, 이 두 가지 프레임워크를 왜 사용해야 하는지에 대해 명확히 해 두고 싶다. Nuxt.js는 내가 만들 Vue 어플리케이션이 SSR(서버 사이드 렌더링)을 할 수 있도록 도와주는 툴이다. 리액트에게 Next.js가 있다면 Vue에게는 Nuxt.js가 있다. SSR을 해야 하는 이유는 SEO(search engine optimization)을 위해서이다. 서버 사이드 렌더링을 하면 검색 봇이 들어와서 페이지 정보를 긁어갈 수 있기 때문이다. 그래서 사이트가 구글 검색에 걸리게 되면 검색을 통한 유입이 발생하게 된다. 이뿐만이 아니라 Nuxt는 Vue Router (참조: nuxt-link 사용하여 페이지 간 이동하기), Vuex (참조: Vuex와 Store – 간단 실습) 등의 기능을 제공하여 Vue 어플리케이션 개발을 훨씬 편리하게 해준다.

Vuetify.js 는 Vue에서 CSS 코딩을 훨씬 편리하게 해주는 매우 강력한 프레임워크이다. 공식 홈페이지에서 코드를 복사/붙여넣기 하는 것만으로 Vue 어플리케이션의 디폴트 레이아웃을 완벽하게 구성할 수 있을 뿐만 아니라 텍스트 입력창, 표, 캐러셀과 같은 이미지 뷰어, 내비게이션 바 등의 디테일한 필수 컴포넌트도 손쉽게 사용할 수 있다. 아주 간단하고 별 거 안했는데 좋아 보인다. Vue를 사용한다면 정말이지 필수적인 프레임워크.

이제 열심히 만들던 나의 Nuxt 프로젝트에서 어떻게 하면 Vuetify를 사용할 수 있는지 알아보자. 아주 간단한 두 가지 방법이 있다. 1) Nuxt + Vuetify starter template을 사용하거나 2) 기존 Nuxt 프로젝트에 Vuetify 모듈을 추가하거나 하는 방법이다.

 

  1. Nuxt + Vuetify starter template
    출처는 이 페이지. 이것은 Nuxt.js와 Vuetify.js 둘 다 포함된 템플릿을 사용해 프로젝트를 만드는 방식이다. 이전에 starter template을 이용하여 Nuxt.js 프로젝트 만들기 튜토리얼 이라는 포스팅을 한 적이 있는데 Nuxt.js 프로젝트와 절차는 거의 똑같다.

    $ vue init vuetifyjs/nuxt [my-project]  
    $ cd [my-project]
    $ npm install

    (Vue가 설치돼 있어야 한다는 얘기는 굳이 안 해도 되겠지?) vuetifyjs/nuxt 템플릿을 사용해서 [my-project] 라는 이름(좋을대로 바꾸자)의 프로젝트를 생성한 후, 그 프로젝트의 폴더로 이동해서 npm install 을 입력해 필요한 모듈을 설치하는 과정이다. 이렇게 생성한 프로젝트를 npm run dev로 실행하면 다음과 같은 첫 화면이 뜬다.

    스크린샷 2018-08-02 오후 9.46.41.png
    (코드를 약간 수정했기 때문에 약간 디테일이 다를 수 있다)
    그냥 Nuxt.js 프로젝트를 생성한 것과의 차이점은 Nuxt + Vuetify 프로젝트에 이미 내비게이션 바나 툴바, footer와 같은 기본적인 사이트 레이아웃이 다 구성되어 있다는 것에 있다. 아이콘도 이미 다 포함되어 있어서 굳이 추가하지 않아도 된다. 새로 프로젝트를 시작하는 사람이 아주 편리하고 간단하게 사용할 수 있을 것 같다.

  2. 기존 Nuxt.js 프로젝트에 Vuetify 모듈 추가하기
    출처는 이 페이지. Nuxt.js 프로젝트를 생성한 후 그 프로젝트에서 Vuetify.js를 쓰고 싶을 때 이 방법을 사용하면 된다.

    $ npm install @nuxtjs/vuetify

    아주 간단한데 일단 나의 Nuxt.js 프로젝트 디렉토리에 npm을 사용하여 Nuxt용 Vuetify를 설치하고 (일반 Vuetify와 다르다고 한다) 프로젝트의 nuxt.config.js 파일 modules 부분에 다음을 추가한다.

    {
      modules: [
        '@nuxtjs/vuetify'
      ],
    
      vuetify: {
        // Vuetify options
        //  theme: { }
      }
    }
    

    아래쪽의 vuetify 부분은 아이콘이나 Vuetify.css 사용을 위한 옵션이다. Vuetify.js는 Google Material Icon에서 제공하는 아이콘을 사용한다. 사용자는 이 방법을 통해 기존에 만들던 사이트에 손쉽게 Vuetify를 설치해서 코딩할 수 있다.

 

Vuetify를 사용하면 아주 편리하게 사이트의 인터페이스를 구성하고 관리할 수 있다. CSS도 뭣도 잘 못하는 나같은 사람도 잘 쓰고 있으니까 누구나 할 수 있을 것이다. 이 쉬운 걸 하면서 왜이렇게 애먹었는지 모르겠다. 역시 공부할 때 제일 중요한 건 ‘알아야 할 것이 무엇인지 명확히 아는 것’ 과 ‘그 알아야할 것을 가르쳐주는 곳을 잘 찾는 것’ 인 것 같다.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s