Can we get the code for the v7 demos please?

[vesper8]

I'm talking about the v7 demos here: https://ragnarlotus.github.io/vue-flux-docs/demos/

It says Here you can find useful demos with their source code and playgrounds.

But I cannot find the actual code or the link to the playground.

And I've had a look for this code inside https://github.com/ragnarlotus/vue-flux-docs/tree/releases/0.1.0

But it seems I can only find the already compiled assets and not the uncompiled code.

I would just find it convenient to start with these demo code samples.

If they are available somewhere and I just can't find them.. could you please point it out to me.

Many thanks for your work on this Vue 3 compatible v7!

[ragnarlotus]

Hello! the demos are currently done and working, but I didn't update https://ragnarlotus.github.io/vue-flux-docs/ because the documentation for V7 components are not finished.

But if you clone the https://github.com/ragnarlotus/vue-flux-docs/tree/releases/0.1.0 and run it locally with npm run dev you can already view and play with them 😉 (don't forget to run npm install 😅)

Just to advice you that it is currently in alpha stage, so some of the new features can have some bug or not fully finished (in fact I'm fixing right now the resize type of fill / fit), but should be no problem for the same functionalities that the V6 have.

In any case don't hesitate to contact if any doubt.

Regards!

[vesper8]

Thanks for the quick and detailed response : ) I understand this is Alpha and I'm happy to see there is very active development on the v7 branch right now.

I'm just trying to get a basic demo up and running inside of my vue 3 app.

I've got this code below which isn't working right now. For the images I tried using a relative path (assuming that it would look inside my public folder by default. I also tried a relative path with ../../../ and I also tried with a URL. Can't get an image to load.

And for the transitions.. I'm getting an error about those too.. don't know if I'm supposed to install another package to have the basic transitions available?

I'd appreciate if you could tell me or show me what's wrong with the below code.

I've got 7.0.0-alpha.29 installed

<template>
  <vue-flux
    :options="options"
    :images="images"
    :transitions="transitions"
  >
    <template v-slot:preloader>
      <flux-preloader />
    </template>

    <template v-slot:controls>
      <flux-controls />
    </template>
  </vue-flux>
</template>

<script>
  import {
    VueFlux, //
    FluxCaption,
    FluxControls,
    FluxIndex,
    FluxPagination,
    FluxPreloader,
    FluxTransition,
  } from 'vue-flux';

  export default {
    data() {
      return {
        options: {
          allowFullscreen: true,
          allowToSkipTransition: true,
          autohideTime: 2500,
          autoplay: true,
          bindKeys: true,
          delay: 5000,
          enableGestures: false,
          infinite: true,
          lazyLoad: true,
          lazyLoadAfter: 3,
        },
        images: [
          'https://i.pinimg.com/originals/5f/8b/4a/5f8b4a904bdf69f77e286a397412b347.jpg', //
          // '../../../../public/img/charlotte.png', //
          // '/img/charlotte.png', //
          // '/img/charlotte.png', //
          // '/img/charlotte.png', //
        ],
        transitions: [
          'blinds3d', //
          'blocks2',
          'book',
          'cube',
          'round2',
          'swipe',
          'warp',
          'wave',
          'blinds2d',
          'explode',
          'round1',
          'fade',
          'camera',
          'waterfall',
          'blocks1',
          'concentric',
          'fall',
          'slide',
          'kenburn',
          'zip',
        ],
      };
    },

    components: {
      VueFlux,
      FluxCaption,
      FluxControls,
      FluxIndex,
      FluxPagination,
      FluxPreloader,
      FluxTransition,
    },
  };
</script>

[ragnarlotus]

Parameters are wrong, check the README of version 7 which is in URL https://github.com/ragnarlotus/vue-flux/blob/v7/README.md

images are now called rscs because for this version you will be able to use images, videos and any component, so I renamed to resources, although in the current alpha version only images are supported.

transitions is not an array of strings, but an array of the transition components.

Also the slots changed the code format.

You can find all of this in the README of V7 😁

[vesper8]

Thank you! I was able to get the flux demo working now.

I'm having trouble getting the parallax working though. I'm using the code from the readme and I'm getting this error:

Uncaught (in promise) TypeError: Cannot create property 'value' on string 'notLoaded'
    at vue-flux.js:225:19
    at new Promise (<anonymous>)
    at Proxy.load (vue-flux.js:224:64)
    at vue-flux.js:709:13
    at runtime-core.esm-bundler.js:2756:88
    at callWithErrorHandling (runtime-core.esm-bundler.js:158:18)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:166:17)
    at hook.__weh.hook.__weh (runtime-core.esm-bundler.js:2736:19)
    at flushPostFlushCbs (runtime-core.esm-bundler.js:330:40)
    at flushJobs (runtime-core.esm-bundler.js:368:5)

Here's my parent component and my parallax demo component

<template>
  <div class="h-[5000px] w-full">
    <div class="h-[400px] w-full bg-blue-200"> </div>
    <ParallaxDemo1 />
    <div class="h-[400px] w-full bg-blue-200"> </div>
  </div>
</template>

<script>
  import { defineAsyncComponent } from 'vue';

  export default {
    components: {
      ParallaxDemo1: defineAsyncComponent(() => import('@/components/playground/landing/ParallaxDemo1.vue')),
    },
  };
</script>

<template>
  <FluxParallax
    class="h-[400px] w-full"
    :rsc="rsc"
  >
    <div>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Labore adipisci asperiores eum a quaerat sed, quidem iusto laudantium itaque voluptatibus incidunt voluptates tempora necessitatibus obcaecati illo dolor molestiae ex possimus!</div>
  </FluxParallax>
</template>

<script>
  import { FluxParallax, Img } from 'vue-flux';

  export default {
    components: {
      FluxParallax,
    },

    data() {
      return {
        rsc: new Img('https://ragnarlotus.github.io/vue-flux-docs/img/slides/36.jpg'),
      };
    },
  };
</script>

Can you tell me what I'm doing wrong?

As you can see I'm preferring to use the older Options API instead of the Composition API but that's never caused an issue before and I don't think it's related here.

[vesper8]

So I've narrowed it down to the Img component. For some weird reason I can't explain, no matter what I pass to the Img.. whether it's a url, or a relative path to my public folder.. it does visibly load the image, but I get an error saying the image could not be loaded, even though it's visible on screen. And the parallax doesn't work, I think as a result.

I tried with the demo in https://github.com/ragnarlotus/vue-flux-docs/tree/releases/0.1.0 and there it works fine without any errors.

This is what rsc looks like:

{ "src": "https://ragnarlotus.github.io/vue-flux-docs/img/slides/36.jpg", "loader": null, "errorMessage": "Image https://ragnarlotus.github.io/vue-flux-docs/img/slides/36.jpg could not be loaded", "status": "notLoaded", "realSize": { "width": null, "height": null }, "displaySize": { "width": null, "height": null }, "caption": "", "resizeType": "fill", "display": { "component": { "__name": "FluxImage", "props": { "color": {}, "rsc": {}, "size": {}, "viewSize": {}, "offset": {}, "css": {} } }, "props": {} }, "transition": { "component": { "__name": "FluxImage", "props": { "color": {}, "rsc": {}, "size": {}, "viewSize": {}, "offset": {}, "css": {} } }, "props": {} }, "resizeProps": {} }

Image is visible, but I get an error in the console and parallax doesn't work, even if I copy the exact same code as in your demo, tried with the composition api (setup method) and with the options api.. same exact results.

Really dumbfounded here.. got any ideas @ragnarlotus ?

[ragnarlotus]

Sorry, I also realized that in last update I renamed a property that fucked up the parallax but is solved in version 7.0.0-alpha.31, update to that version and let me know.

[vesper8]

Hrm.. I've already been using 7.0.0-alpha.31 for the last two days and what i wrote above was all experienced on that version.. including more tests I did just a few hours ago.

[ragnarlotus]

Would you mind preparing a simple codepen or any testing platform so I can see all the scope? I'm sure it is very simple to solve if I can see the whole view 😉

[ragnarlotus]

I created another release .32 just in case something was fucked up, and pointed the the documentation to unfinished version: https://ragnarlotus.github.io/vue-flux-docs/demos/components/flux-parallax.html

I will keep it like this for a day so you can make it working, then I will revert it until I finish the documentation, but all demos are functional and unsless a but making them they should work.

Regards

[vesper8]

Thanks @ragnarlotus

So I figured out what the issue is.. it seems that I can't get this to work using the older Options API. It only works with the Composition API. There's surely a way and if you know I'd be curious to know.

For the same template:

<template>
  <FluxParallax
    :rsc="rsc"
    type="relative"
    offset="50%"
    style="height: 250px"
  >
    <div class="flex h-full items-center justify-center">
      <div class="px-8 text-center text-4xl leading-snug text-white">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Labore adipisci asperiores eum a quaerat sed, quidem iusto laudantium itaque voluptatibus incidunt voluptates tempora necessitatibus obcaecati illo dolor molestiae ex possimus!</div>
    </div>
  </FluxParallax>
</template>

This works:

<script setup>
  import { FluxParallax, Img } from 'vue-flux';

  const rsc = new Img('/img/test.png', 'img 1');
</script>

And this doesn't work (Causing the error I pointed out above)

<script>
  import { FluxParallax, Img } from 'vue-flux';

  export default {
    components: {
      FluxParallax,
    },

    data() {
      return {
        rsc: new Img('/img/test.png', 'caption'),
      };
    },
  };
</script>

[ragnarlotus]

@vesper8 you are damn right... I'm trying to find a solution but there is not metion about it.

Debugging I found that when using FluxParallax from a component built with the Options api, the Img prop is passed as a proxy object.

And even TS detects the problem, but I don't know how to solve it because after checking all vue 3 documentation I couldn't find any related subject.

This turned a bit hilarious because I can't make 2 versions, so I will open a post in a forum and cross fingers...

https://github.com/vuejs/core/discussions/9792

[ragnarlotus]

Good news @vesper8 , somebody from the forum knew the answer...

You have to use:

data() {
   return {
      rsc: markRaw(new Img(`/images/01.jpg`, 'img 01')),
   };
},