[Vue2x] Progress Bar 적용

저는 Vue 2x 사용할 때 Light Vue API 의 Progress Bar 를 적용했습니다.

 

https://lightvue.org/

LightVue | The Emerging UI Component library for Vue

 

LightVue 설치 

// For Vue 2.x
npm install lightvue --save

// For Vue 3.x
npm install lightvue@next --save

 

적용 예시 

<template>
  <div style="width: 100%">
    <LvProgressBar :value="value" />
    <br />
    <LvProgressBar :value="30" :showValue="false" color="progressColor" />
  </div>
</template>
<script>
import LvProgressBar from 'lightvue/progress-bar';

export default {
  data() {
    return {
      progressColor: '#38b2ac',
    };
  },
  components: {
    LvProgressBar: LvProgressBar,
  },
};
</script>

위와 같이 적용해주면 된다.

 

자세한 설명은 LightVue 의 Document 를 참고하시면 됩니다. ㅎㅎ 

해당 설정을 Nuxt.JS 에서 사용 시 Chrome 에서는 되는데 IE 에서는 안나오는 현상이 나오거나

구성요소를 못찾는 경우가 발생합니다. 참고해주세요.