Using particles-bg-vue with Nuxt.js
Tags: vue, node, css, javascript
Published: 2019-12-12 04:33:12

## Table of Contents

* [What is particles-bg-vue?](#what)
* [Usage in Nuxt.js](#usage)
  * [Install](#install)
  * [Vue use with plugins](#plugins)
  * [Hit particles in layouts in common](#hit)
  * [Load layouts](#layouts)
* [Conclusion](#conclusion)
* [Postscript (I want to change the canvas style of the particles](#postscript)
  * [Create canvasObject](#create-canvasobject)

<span id="what"></span>
## What is particles-bg-vue? 

`particles-bg-vue` is a vue.js particle background plugin that can make your website cool instantly. Its characteristic is that it is very simple to use and only requires one line of code. And the function is relatively powerful, you can achieve a variety of effects by configuring different parameters.

### project url [https://github.com/lindelof/particles-bg-vue](https://github.com/lindelof/particles-bg-vue)

![img](https://raw.githubusercontent.com/lindelof/particles-bg-vue/master/images/01.jpg)
![img](https://raw.githubusercontent.com/lindelof/particles-bg-vue/master/images/02.jpg)
![img](https://raw.githubusercontent.com/lindelof/particles-bg-vue/master/images/03.jpg)
![img](https://raw.githubusercontent.com/lindelof/particles-bg-vue/master/images/04.jpg)

In addition to the Vue.js version, there is also a [React version](https://github.com/lindelof/particles-bg).

Anyway, I will try to use it anyway.

<span id="usage"></span>
## Usage in Nuxt.js
However, if you just use particles-bg-vue with Vue.js, you just read the [README](https://github.com/lindelof/particles-bg-vue/blob/master/README.md), so we will check how to use it with Nuxt.js.

### Install
Use npm or yarn for installation.
```shell
npm install --save particles-bg-vue
```
It ’s easy.

<span id="plugins"></span>
### Vue use with plugins
The easiest way to use Vue use with Nuxt.js is to load it as [plugins](https://nuxtjs.org/guide/plugins/).

```javascript
// plugins/particles.ts

import Vue from 'vue';
import VueParticlesBg from "particles-bg-vue";

Vue.use(VueParticlesBg);
```
Change the configuration of `nuxt.config.ts` to load the above plugins with `Nuxt.js`.

```javascript
// nuxt.config.ts
export default {
  mode: 'spa',
  env: {},
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      {
        hid: "description",
        name: "description",
        content: process.env.npm_package_description || ''
      }
    ],
    link: [
      { rel: "icon", type: "image/x-icon", href: "/favicon.ico" }
    ]
  },
  loading: { color: "#3B8070" },
  css: [],
  plugins: ['@/plugins/compositionAPI', '@/plugins/particles'],
```

<span id="hit"></span>
### Hit particles in layouts in common
When assigning a layout in common to Nuxt.js, declare it in [layouts](https://nuxtjs.org/api/pages-layout/) and use it on each page

```vue
//layouts/default.vue
<template>
  <div class="app">
    <particles-bg type="circle" :bg="true" /> 
    <nuxt/>
  </div>
</template>
```
Please confirm the README: [Parameter Description](https://github.com/lindelof/particles-bg-vue/blob/master/README.md#parameter-description) of particles-bg-vue for the contents to be set to type.

<span id="layouts"></span>
### Load layouts
Load the layouts created above for the page where you want to hit the particles.

This time I will use the latest Vue.js API [Vue Composition API](https://vue-composition-api-rfc.netlify.com/) as an example.

For example, if you want to hit the top page (index)

```vue
<template>
  <section class="section">
    <div class="container">
      <hoge  prop="hogeeee!!"/>
    </div>
  </section>
</template>

<script lang="ts">
  import {
    createComponent,
    reactive,
    onMounted,
    computed,
    ref
  } from '@vue/composition-api';
  import FileList from '@/components/hoge.vue';
  export default createComponent({
    layout: 'default', 
    components: {
      hoge
    },
    setup() {
    }
  })
</script>
```

Then you can apply

![img](https://i.imgur.com/IAstOlF.png)
Easy! !

## Conclusion

I just got started with Nuxt.js, but how easy it is to create a cool page! It is an impression.


<span id="postscript"></span>
## Postscript (I want to change the canvas style of the particle!)

I've been using `particles-bg-vue` for a while, and I have a little trouble.
![img](https://i.imgur.com/FhOet7R.png)

If you increase the magnification of the browser, the particle canvas does not follow it and protrudes from the clean particle canvas.

So when I checked what I couldn't do, it was written in the README: Parameter Description of particles-bg-vue.

However, since the description is a little difficult to understand, I will add it here.

### Create canvasObject
If you check the elements of the particle part with F12 (developer tool) etc., you can see that the particle is expressed with the canvas tag.
![img](https://i.imgur.com/hw6bydF.png)

This canvas style can be changed by passing an object called canvasObject to the props of particle-bg.

Furthermore, in the new API of Vue.js, CompositionAPI, the variable passed to template must be passed by return of setup () regardless of whether it is reactive or reactive.

So

```vue
<template>
  <div class="app">
    <particles-bg type="circle" :bg="true" :canvas="canvasObject"/> 
    <div id="nav">
      <nuxt-link to="/">Home</nuxt-link> |
      <nuxt-link to="/sample">sample</nuxt-link> |
      <nuxt-link to="/list">list</nuxt-link>
    </div>
    <nuxt/>
  </div>
</template>

<script lang='ts'>
  import {
    createComponent,
    reactive,
    onBeforeMount,
    onUpdated,
    onMounted,
    computed,
    watch,
    ref
  } from '@vue/composition-api';

  const canvasObject = {  
    height: '120%'
    };
  export default createComponent({

    setup () {

      return {
        canvasObject  
      };
    }
  });
</script>
```

And try
![img](https://i.imgur.com/ct8mkR2.png)

The style is changed correctly,

![img](https://i.imgur.com/0rTlW56.png)

#### A canvas as expected!