Aminerman / vue-kinesis

Easily create complex interactive animations with Vue.js
https://www.aminerman.com/kinesis/
MIT License
1.47k stars 59 forks source link

not wroking in laravel #56

Open saraElsanan opened 3 years ago

saraElsanan commented 3 years ago

image I followed the doc and added the import then use , Laravel mix is building successfully but I get this error

i used this code in the doc ` Here, you can put

whatever
  <kinesis-element :strength="20">
      content!
  </kinesis-element>

`

Aminerman commented 3 years ago

Hello! I don't really know about the specifics of Laravel and why it wouldn't work in this specific environment. If you want to help me figure out the problem, maybe you can share a small repository with instructions on how I can get it running locally so I can test and debug it? That would be quite helpful. Thank you :)

saraElsanan commented 3 years ago

sure I'll make you a laravel repo with vue-kinesis installed I'll add you to the repo

saraElsanan commented 3 years ago

@Aminerman i set up an empty laravel project and installed vue-kinesis and imported it and wrote you the instructions i sent you an invitation .

Aminerman commented 3 years ago

Thank you Sara, I'll give it a look and get back to you as soon as I can.

MooseSaeed commented 2 years ago

Hello, is there any updates for this issue? I'm trying to use it in Laravel and VueJS 3 and it's not working

Aminerman commented 2 years ago

@MooseSaeed No updates here as, in order to provide a solution, I need an out-of-the-box working Laravel project. @saraElsanan provided a repository but I have to install dozens of things, configurations etc to make it work. Also, I have no idea what are the specificities of a Laravel project that would prevent this from working.

So please, if you or someone who is enough knowledgeable about Laravel can debug it, it would be helpful. Otherwise, I can't do much.

MooseSaeed commented 2 years ago

@Aminerman Thanks for responding so quickly! I'm trying to use Kinesis in Laravel project but for some reason it's not working. I can be so descriptive about the issue but i'm not sure if i should do it here or open a new issue on Github as i'm getting different error than the one mentioned above. Kinesis seems so easy to use and brilliant and it really frustrates me that it's not working in Laravel.

Aminerman commented 2 years ago

@MooseSaeed Thanks for the kind words.

I'd advise you to first test if it's specific to Laravel : either create a Vite project or in CodeSandbox. If it's Laravel then you can give more details here about your error. Otherwise it would be better to open a new issue.

MooseSaeed commented 2 years ago

@Aminerman Well all i'm trying to do is to use the example on https://aminerman.com/kinesis/#/ and that's it. I was just trying to get it to work by following how to use steps but it just doesn't work. I will share here what the steps i've taken and what it led me to in order to see if you can help out. Thanks again! :)

MooseSaeed commented 2 years ago

@Aminerman It just worked 😄 I was importing VueKinesis in app.js since it's where I mount on #app but apparently in Laravel I should import it in the component itself.

All I did was running npm install --save vue-kinesis@next then creating a component called Testing.vue as follows:

<template>
    <kinesis-container>
        Here, you can put
        <kinesis-element :strength="10"> whatever </kinesis-element>
        <kinesis-element :strength="20"> content! </kinesis-element>
    </kinesis-container>
</template>

<script>
import VueKinesis from "vue-kinesis";
import { KinesisContainer, KinesisElement } from "vue-kinesis";

export default {
    components: { VueKinesis, KinesisContainer, KinesisElement },
};
</script>

<style></style>

Then in my blade I called the component like this:

<x-bloglayout>

    <div class="justify-center text-center text-white">
        <Testing />
    </div>

</x-bloglayout>

And i got it working like this. not sure yet if it's the right behavior but i will read the docs and go from there

Card

Thanks for trying to help :)

MooseSaeed commented 2 years ago

@Aminerman I can't find a proper full code example on Vue Kinesis. I searched everywhere and I couldn't find any.