nuxt.js 노트

no-ssr component

클라이언트에서만 렌더링할 수 있는 컴포넌트

https://nuxtjs.org/api/components-no-ssr/

<template>
  <div>
    <sidebar />
    <no-ssr placeholder="Loading...">
      <!-- this component will only be rendered on client-side -->
      <comments />
    </no-ssr>
  </div>
</template>

나중에는 <no-ssr/>이 아닌 <client-only/>로 사용되고 있음.

<client-only>
  <component/>
</client-only>

Array 타입 데이터의 요소값을 업데이트 하는방법

this.items[2] = true;와 같은 방식으로 data 값을 변경하는건 불가능하다. 하지만 this.$set()메서드를 사용하면 업데이트를 할 수 있다.

this.$set(this.items, idx, 'apple');

<nuxt-link/>컴포넌트에서 이벤트 컨트롤

<nuxt-link/> 컴포넌트로 to 속성값으로 페이지 이동을 하는데 어쩔때는 페이지 이동하지 않고 클릭 이벤트로만 사용하고 싶을때가 많다.
하지만 이상하게도 레퍼런스가 적어서 무리해서 <button/>엘리먼트로 사용하고 있었다. (하지만 맞는 방식이긴 함..)
다음과 같이 클릭 이벤트만으로 사용하고 /foo 주소로 이동하지 않게된다.

<nuxt-link to="/foo" event="" @click.native="$emit('click', $event)"/>

속성값 event의 기본값은 click이고, https://router.vuejs.org/kr/api/#event 문서를 통하여 자세한 내용을 확인할 수 있다.

<nuxt-link/>컴포넌트에서 replace 이용하기

기본적으로 <nuxt-link/> 컴포넌트를 사용하면 push방식으로 사용되는데(히스토리 추가) replace방식으로 마지막 히스토리에서 url 교체하도록 한다.

<nuxt-link to="/foo" replace/>