[Nuxt] 5. Nuxt에서 Vuetify 적용하기

Nuxt + Vuetify = ?!

1. Nuxt에서 Vuetify 사용하기

Vuetify은 jQuery bootstrap 같은거다. UI Framework? 여러 UI Element, Keen UI, Boostrap-Vue 등도 있지만 나는 Vuetify를 사용하기로 결정했다.

들어가기 전에 Node.js는 v8엔진으로 브라우저 밖에서도 javscript를 사용하게끔 하여, 모듈화와 SPA을 알아보고 SPA의 SEO이슈를 해결하기 위해 SSR를 고려한 Vue.js로 만든 프론트 프레임워크 Nuxt.js를 알아봤다.

이번에는 Vuetify.js이다. vue프로젝트에서 CSS코딩을 관리하는 UI프레임워크이면서 레이아웃부터 해서 메뉴, 네이게이션바 등 여러 컴포넌트를 쉽게 사용 가능하고 개발속도를 높일 수 있다.

그러면 vue-cli를 통해 프로젝트 생성 후 모듈을 설치한다.

cmd

$ vue init vuetifyjs/nuxt <my-project>  
$ cd <my-project>                     
# install dependencies
$ npm install # Or yarn install
$ npm run dev

그리고 localhost:3000에 접속하면 된다.

참고