느린 개발자

 

Nuxt2 환경에서 Cli 명령어로 간단하게 Nuxt 프로젝트와 Vuetify 설치를 진행을 해보고
Material icon을 설정하는 방법을 알아보도록 하겠습니다.

 

Nuxt2 설치 

• cli 명령어로 나오는 밑에 단계들 진행

 # nuxt2 프로젝트 생성 cli 명령어
npx create-nuxt-app NuxtTest

# 1. 프로젝트 이름 설정
create-nuxt-app v5.0.0
✨  Generating Nuxt.js project in .
? Project name: (NuxtTest) 

# 2. 언어 설정
? Programming language: (Use arrow keys)
> JavaScript 
  TypeScript 

# 3. package manager 설정
? Package manager: (Use arrow keys)
  Yarn
> Npm Script

# 4. UI 프레임워크 선택 (vuetify 선택)
? UI framework:
  None
  Ant Design Vue
  BalmUI
  Bootstrap Vue
  Buefy
  Chakra UI
  Element
  Oruga
  Primevue
  Tachyons
  Tailwind CSS
  Windi CSS
  Vant
  View UI
> Vuetify.js

# 5.Template Engine 선택
? Template engine: (Use arrow keys)
> HTML
  Pug

# 6. axios 선택 (추후 서버와 통신하려면 axios 설정하자)
? Nuxt.js modules:
>(*) Axios - Promise based HTTP client
 ( ) Progressive Web App (PWA)
 ( ) Content - Git-based headless CMS

# 7. Eslint와 prettier 설정 -> 사용안한다면 해제
? Linting tools:
 (*) ESLint
>(*) Prettier
 ( ) Lint staged files
 ( ) StyleLint
 ( ) Commitlint

# 8. Test 툴 사용하려면 선택
? Testing framework:
> None
  Jest
  AVA
  WebdriverIO
  Nightwatch

# 9. Rendering mode 선택 
? Rendering mode: (Use arrow keys)
> Universal (SSR / SSG)
  Single Page App
  
# 10. 배포 타겟 설정
  ? Deployment target: (Use arrow keys)
> Server (Node.js hosting)
  Static (Static/Jamstack hosting)
  
# 11. Development tools 선택
  ? Development tools:
>( ) jsconfig.json (Recommended for VS Code if you're not using typescript)
 ( ) Semantic Pull Requests
 ( ) Dependabot (For auto-updating dependencies, GitHub only)

# 12. Continuous integration 선택
? Continuous integration: (Use arrow keys)
> None
  GitHub Actions (GitHub only)
  Travis CI
  CircleCI

# 13.git 선택
? Version control system: (Use arrow keys)
> Git
  None

 

Vuetify에서 사용할 icon 설치

• Vuetify에서 Material icon 사용하기 위해 설치합니다. 

npm install --save -D material-design-icons-iconfont

 

 

 

Vuetify 설정

• plugins 폴더를 생성하고 Vuetify.js 파일을 생성합니다.

plugins 폴더

• vuetify.js 파일에서 iconfont 설정을 합니다.

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'material-design-icons-iconfont/dist/material-design-icons.css'

Vue.use(Vuetify, {
  iconfont: 'mdi'
})

 

• nuxt.config.js 에서 plugins폴더에 만든 vuetify.js 파일을 설정합니다.

  plugins: [
    '~/plugins/vuetify.js',
  ],

 

 

 

Material icon 확인

• pages/index.vue 에서 v-icon을 사용하여 아이콘이 나오는지 확인합니다.

<template>
  <div>
    <v-btn
      class="ma-2"
      color="primary"
    >
      Accept
      <v-icon
        end
      >mdi-checkbox-marked-circle</v-icon>
    </v-btn>
  </div>
</template>

 

• npm run dev 명령어로 실행합니다.

 

아이콘 버튼

 

---

Vuetify에서 기본적으로 Material icon을 지원한다는데 설치 안 하면 아이콘이 보이지 않더라고요 

그래서 설치해서 간단하게 설정하는 방법을 소개했습니다. 혹시 다른 방법이나 틀린 부분이 있을 경우 댓글 부탁드립니다.

감사합니다.