[Vue] loading indicator 로딩 인디케이터

1. 스피너란?

웹 페이지의 로딩 상태를 나타내는 컴포넌트를 의미

 

2. npm 설치

https://www.npmjs.com/package/vue-full-loading

npm i vue-full-loading

<template>
 <loading
     :show="show"
     :label="label"
     event-show="show-full-loading">
 </loading>
</template>

<script>
import loading from "vue-full-loading";

export default {
 component: {
  loading
 },
 data() {
  return {
    loading: false,
    label: 'Loading...'  // 화면에 표시되는 문구
  }
 } 
}

</script>

 

 

모듈 npm으로 쓰지 않고 직접 코드로 만든 블로그내용

https://blog.naver.com/PostView.nhn?blogId=pjok1122&logNo=221644786721&parentCategoryNo=&categoryNo=&viewDate=&isShowPopularPosts=false&from=postView 

[Vue-CLI] Spinner Component 사용하기, vue router 라우터 네비게이션 가드