Unable to use

[sricodelli]

How to add this package to this laravel vuejs template that im using for my project.

https://github.com/cretueusebiu/laravel-vue-spa

I tried to follow your instructions to install and have this on the layout vue component

<template>
  <div class="basic-layout d-flex align-items-center justify-content-center m-0 bg-white">
    <rotate-square2></rotate-square2>
    <child/>
  </div>
</template>

<script>
import { RotateSquare2 } from 'vue-loading-spinner'
export default {
  name: 'BasicLayout',
  components: {
      RotateSquare2
    }
}
</script>

<style lang="scss">
.basic-layout {
  color: #636b6f;
  height: 100vh;
  font-weight: 100;
  position: relative;

  .links > a {
    color: #636b6f;
    padding: 0 25px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1rem;
    text-decoration: none;
    text-transform: uppercase;
  }
}
</style>

But i get a huge error when i run npm run watch. I cannot copy the error code as it is too huge, but here is the snapshot https://ibb.co/nxsvYJ
Any help is appreciated.

[kingRayhan]

I got same errors

[Mo7sin]

@kingRayhan Same here

[kingRayhan]

No response from author still now 🤧

[kl3sk]

i'll had a simillar probleme and solved like this:

npm install --save-dev babel-preset-stage-2
npm install --save-dev babel-plugin-transform-runtime

But can't show spinner !

[saleem-hadad]

Thank you @kl3sk it works.
But I'm not sure why in your situation the spinners don't show 🤔
Maybe you forgot to add the spinner component into the components section?

[kl3sk]

@saleem-hadad no I didn't, those packagings were missing for me.

[ersengultepe]

Hello there,

I have not been able to deal with it a few months ago and use the package anyway. Luckily I saw it here and tried again and finally helped. I use Laravel and assume that you will make changes according to your own self, considering this as a solution.

From the beginning,

Let's setup first

npm install --save vue-loading-spinner

then open the app.js file

window.Vue = require ('vue'); under the code
For example, let's write something like the below.
import Plane from 'vue-loading-spinner / src / components / Plane.vue';

Caution: Plane will not be in brackets.

afterwards;

Vue.component ('Plane', Plane);
we create a component with a code like the one above.

we use it in the following way
<Plane></Plane>

That is all,
the writer did not need to explain it because it was so easy.