Documentation for Nuxt integration

[austingil]

Documentation for Nuxt integration

[AustinGil]

Ok, I think I might understand you. Vuetensils is a zero-dependency library and Im going to keep it that way. I dont like worrying about security or maintenance for so many libraries in my projects and I dont want my users to deal with it either. So anything I need will be in the source code and easy to get to. The reason for this error is actually known to me, and I know how to fix it. There is a reference to document in order to add the escape key listener. It's also a relatively simple fix, I just need the time to build it and test it.

[AustinGil]

@callumflack Really sorry about that, and thanks for the feedback. This is really helpful and important to me. I won't launch the official v1 until I have full Nuxt integration sorted out.

In regards to what would have triggered an issue, the only real changes to the code were to the VInput component. However, my guess is that it's something to do with some recent dependency updates I made.

Can you tell me what your component import statements look like?

[AustinGil]

@callumflack Diving into this a bit now. What are the errors you're getting with VResize if you don't use the client-only component? I just installed Nuxt and started playing around with it and did not see any issue using VResize directly.

@agritheory Could you also answer the same question?

I've just run it with

VResize,
VDrawer,
VDropdown,
VDialog,
VTabs,
VTooltip,
VImg,
VToggle,
VIntersect,

The only error I found was in VImg. With that fix, I haven't seen any more during dev or running the build command. I also tried using nuxt generate and tested on a static site with no errors. I did not try deploying to a fully SSR node environment though. So any feedback on this would be helpful.

[AustinGil]

Yeah, that's a good way about it. I think services like Cloudinary and Imgix do a fantastic job for optimizing things. Vuetensils is a zero-dependency project that aims to stick as close to the HTML spec as possible, so I can't quite do things like you're doing, but this looks like a good alternative.

By the way, @callumflack and @agritheory can you share the projects you're using Vuetensils on? I want to start promoting them.

[AustinGil]

Also, closing this as the last thing missing will be fixed in the next release.

[AustinGil]

Hi @agritheory. You're absolutely right on several points. Currenlty Vuetensils does not support SSR. The best advice I have in the short term is to wrap any Vuetensils component with Nuxt's <client-only> component (https://nuxtjs.org/api/components-client-only).

I've been working on expanding the offerings of Vuetensils, and exploring how I want the API to look like. As I near the release of version 1, I want to change focus to improving what is already there. This includes better documentation, more testing, automated changelogs, and of course, SSR support. I think it's only a couple of components that would be an issue for this, but I haven't had the chance to tackle it yet.

I hope this is a satisfactory answer. Short term, there is a workaround. Long term, yes it will be fully Nuxt compatible. And I hope that you still consider to use it until if fully supports your needs. You feedback is very helpful in directing what features I need to focus on.

Lastly, Im not sure what you meant by "and vendor?"

[agritheory]

@Stegosource Thanks, this makes sense. I will try <client-only> to see if it works with the drawer.

"vendor" the I'm using it is to bring a dependency into the parent repository and keep the code there, modified or not.

[callumflack]

I use Nuxt extensively and I usually don't have any problem wrapping, say VResize, in client-only. However, I noticed on 0.7.3 that doing this simply doesn't work. If I revert back to 0.7.1, it's fine again. Yet I can see that between 0.7.1 and 0.7.3 there's no change to VResize.

That's probably not that helpful @Stegosource but maybe it'll trigger something in your recent memory…

[callumflack]

Hey @Stegosource no sorrys, all good. I think I got the error while I was using client-only as well. I've never had the issue before when using Resize, so I guess it was weirdly particular to a project. I should have time tomorrow to recreate and record it.

Concurring with your list above — all the other components work fine out fo the box with Nuxt except VImg for which I have my own component.

[callumflack]

Quick rundown of the Image component I've been using for some time. I use v-lazy-image with some salt:

<figure
    ref="image"
    :ratio="ratio"
    :style="aspectRatio"
    :class="[useAspectRatio, useRelativeAspect]"
  >
    <client-only>
      <v-lazy-image :src="url" :src-placeholder="urlPlaceholder" :alt="alt" />
    </client-only>
  </figure>

But instead of providing an array of picture srcs, I measure the element and compute parameters for an imaging service, like Cloudinary or Imgix.

mounted() {
    const optimizeParams = "auto=format&q=40";

    // Placeholder
    const url = `${this.src}?${optimizeParams}`;
    this.urlPlaceholder = `${url}&blur=20&w=40`;

    // Full size
    const scaledWidth = this.$refs.image.clientWidth * 2;
    const width = Math.min(scaledWidth, this.maxWidth);
    this.url = `${url}&w=${width}`;
  },

Beats managing picture srcs.

I tried using VImg recently. Bur realised I can't use it until I have access to the Nuxt window with it as I need to provide an aspect ratio space (background-coloured, or low-res blur, etc) to load the image into.

[callumflack]

Cheers @Stegosource, I realise the image component rundown was off-topic. I wouldn't want any other dependency in Vuetensils. But it might be worth checking out how v-lazy-image is done vs the current VImg.

I use veutensils on all my projects in the past 6 months. Example: https://www.round.com.au

[AustinGil]

Nice. I'll check it out. You got any more to share? Trying to build a nice list.

Regarding the v-lazy-image, I think I missed something. What features does v-lazy-image have that are missing in VImg, or what do you think can be improved?