[Vuejs]-Finisher.co/lab/header in Vue js

by

0👍

✅

Since Finisher Header is just a simple library to create animated headers, I don’t see any problems using it beside in a Vue.js project.

As long you don’t want to have a complete wrapper controlling all properties of the header, just put the generated header next to your Vue app in the project.

See the playground below.

If you like to render the header after the Vue app is mounted, then put the initialization of the header inside the mounted() hook

mounted() {
  new FinisherHeader({
      ....
   });
}

This works also.

Just don’t put the initialization of the header before Vue app.
It does not work then.

If there will be any conflicts between libraries, just comment out the header, to check if the problem is really caused by a conflict or it is something else in your Vue app.

The best way to avoid conflicts is to separate the header from the Vue app in the HTML.

<body>
    <div class="header finisher-header" style="width: 100%; height: 300px;">
        Logo, navigation, etc.
    </div>
    <div id="app">
        Vue App
    </div>
</body>

If you do it this way, the possibility of a conflict between the Vue App and the Header will be very very small.

Playground

const { createApp, ref } = Vue;

const app = createApp({
  data() { 
    return { time: new Date() }
  }
 }
)
app.mount('#app')

new FinisherHeader({
  "count": 6,
  "size": {
    "min": 1100,
    "max": 1300,
    "pulse": 0
  },
  "speed": {
    "x": {
      "min": 0.1,
      "max": 0.3
    },
    "y": {
      "min": 0.1,
      "max": 0.3
    }
  },
  "colors": {
    "background": "#9138e5",
    "particles": [
      "#6bd6ff",
      "#ffcb57",
      "#ff333d"
    ]
  },
  "blending": "overlay",
  "opacity": {
    "center": 1,
    "edge": 0.1
  },
  "skew": -2,
  "shapes": [
    "c"
  ]
});
<body id="app">
  <div class="header finisher-header" style="width: 100%; height: 300px;">
    <h1> Header </h1>
    <h2> Time: {{time.toLocaleTimeString()}} </h2>
  </div>
</body>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://finisher.co/lab/header/assets/finisher-header.es5.min.js" type="text/javascript"></script>

Leave a comment