DEV Community: Andrey Gaisinskii

Handling form errors with vuelidate in VueJS 3.0

Andrey Gaisinskii — Wed, 05 Oct 2022 15:18:35 +0000

Intro

Hey everyone!

In today's article I will show you a clean and simple approach on handling form errors in VueJS 3.0 with vuelidate. Additionally I will be using NuxtJS 3.0 and TypeScript because they are some of my most favourite tools to use in modern frontend environment.

Motivation

Vuelidate gives us a few examples on how to display validation messages:

<!-- Display all errors -->
<p
  v-for="error of v$.$errors"
  :key="error.$uid"
>
<strong> {{ error.$message }} </strong>
</p>

<!-- Display all errors of an individual property -->
<p
  v-for="error of v$.name.$errors"
  :key="error.$uid"
>
<strong> {{ error.$message }} </strong>
</p>

And its fine if your markup is pretty simple, but what if you have a lot of inputs or you are using a ui framework that comes with an error message prop like Vuetify's textarea component does. If you are still interested then welcome aboard and lets make form validation great again!

Coding

Let's create a simple form using Vuetify 3.0 like this:

<!-- @/pages/index.vue -->

<v-form @submit.prevent="validate()" class="form">
  <v-container>
    <v-row>
      <v-col cols="12">
        <v-text-field v-model="v$.firstName.$model" label="First Name" variant="solo"/>
      </v-col>

      <v-col cols="12">
        <v-text-field v-model="v$.lastName.$model" solor label="Last Name" variant="solo" />
      </v-col>

      <v-col cols="12">
        <v-text-field v-model="v$.email.$model" label="E-mail" variant="solo"/>
      </v-col>

      <v-col cols="12">
        <v-textarea v-model="v$.message.$model" label="Message" variant="solo"/>
      </v-col>

      <v-col cols="12">
        <v-text-field v-model="v$.password.$model" label="Password" variant="solo"/>
      </v-col>

      <v-col cols="12">
        <v-btn type="submit" color="success">Submit</v-btn>
      </v-col>
    </v-row>
  </v-container>
</v-form>

and a ref that will hold values of our inputs like this:

// @/pages/index.vue

<script setup lang="ts">
import type { IForm } from '@/interface/form.interface'

const form = ref<IForm>({
  firstName: '',
  lastName: '',
  email: '',
  message: '',
  password: ''
})
</script>

If you are not familiar with TypeScript, IForm is an interface that helps us with type checking. If you are using JavaScript just remove the <IForm> and you are fine. For those who uses TypeScript, my interface looks like this:

// @/interface/form.interface.ts

export interface IForm {
    firstName: string;
    lastName: string;
    email: string;
    message: string;
    password: string;
}

Now import vuelidate's validators along side with custom error messages and let's define an object with validation rules like this:

// @/pages/index.vue

<script setup lang="ts">
import { required, helpers, email } from '@vuelidate/validators'

import { FORM_INVALID_EMAIL, FORM_REQUIRED_FIELD } from '@/helpers/messages'

const rules = {
  firstName: {
    required: helpers.withMessage(FORM_REQUIRED_FIELD, required)
  },
  lastName: {
    required: helpers.withMessage(FORM_REQUIRED_FIELD, required)
  },
  email: {
    required: helpers.withMessage(FORM_REQUIRED_FIELD, required),
    email: helpers.withMessage(FORM_INVALID_EMAIL, email)
  },
  message: {
    required: helpers.withMessage(FORM_REQUIRED_FIELD, required)
  },
  password: {
    required: helpers.withMessage(FORM_REQUIRED_FIELD, required)
  }
}
</script>

// @/helpers/messages.ts
const FORM_REQUIRED_FIELD = 'This field is required'
const FORM_INVALID_EMAIL = 'This email is invalid'

export {
  FORM_REQUIRED_FIELD,
  FORM_INVALID_EMAIL
}

And finally let's import vuelidate itself and bind our rules and form to it:

// @/pages/index.vue
<script setup lang="ts">
import { useVuelidate } from '@vuelidate/core'

const v$ = useVuelidate(rules, form)
</script>

To sum it up, our code will look like this:

<!-- @/pages/index.vue -->

<template>
  <main class="main">
    <v-form @submit.prevent="validate()" class="form">
      <v-container>
        <v-row>
          <v-col cols="12">
            <v-text-field v-model="v$.firstName.$model" label="First Name" variant="solo"/>
          </v-col>

          <v-col cols="12">
            <v-text-field v-model="v$.lastName.$model" solor label="Last Name" variant="solo" />
          </v-col>

          <v-col cols="12">
            <v-text-field v-model="v$.email.$model" label="E-mail" variant="solo"/>
          </v-col>

          <v-col cols="12">
            <v-textarea v-model="v$.message.$model" label="Message" variant="solo"/>
          </v-col>

          <v-col cols="12">
            <v-text-field v-model="v$.password.$model" label="Password" variant="solo"/>
          </v-col>

          <v-col cols="12">
            <v-btn type="submit" color="success">Submit</v-btn>
          </v-col>
        </v-row>
      </v-container>
    </v-form>
    </main>
</template>

<script setup lang="ts">
import { useVuelidate } from '@vuelidate/core'

import { required, helpers, email } from '@vuelidate/validators'

import { FORM_INVALID_EMAIL, FORM_REQUIRED_FIELD } from '@/helpers/messages'

import type { IForm } from '@/interface/form.interface'

const form = ref<IForm>({
  firstName: '',
  lastName: '',
  email: '',
  message: '',
  password: ''
})

const rules = {
  firstName: {
    required: helpers.withMessage(FORM_REQUIRED_FIELD, required)
  },
  lastName: {
    required: helpers.withMessage(FORM_REQUIRED_FIELD, required)
  },
  email: {
    required: helpers.withMessage(FORM_REQUIRED_FIELD, required),
    email: helpers.withMessage(FORM_INVALID_EMAIL, email)
  },
  message: {
    required: helpers.withMessage(FORM_REQUIRED_FIELD, required)
  },
  password: {
    required: helpers.withMessage(FORM_REQUIRED_FIELD, required)
  }
}

const v$ = useVuelidate(rules, form)

const validate = async () => {
    const result = await v$.value.$validate() 

    if (!result) {
        return
    }

    alert('Success! Sending to API')
}
</script>

If you press the submit button without filling in the form and open Vue DevTools, in the v$ object you will find $errors property containing errors for each corresponding input.

Each object in the $errors array has a $message property with a custom error message that we have defined in @/helpers/messages.ts. What we have to do here, is to iterate through $errors array and create a map of errors.

Let's create a composable useValidationErrors.ts, this function takes an array of errors from vuelidate and using reduce method creates an object of key-value pairs, where our key is a name of the validated property and our value is a custom defined message.

// @/composables/useValidationErrors.ts

import type { ErrorObject } from '@vuelidate/core'

export const useValidationErrors = <T extends Record<keyof T, string>>(errors: ErrorObject[]): Record<keyof T, string> => {
  return errors.reduce((acc, value) => {
    return { ...acc, [value.$property]: value.$message }
  }, {} as Record<keyof T, string>)
}

JavaScript version of this composable will look like this:

// @/composables/useValidationErrors.js

export const useValidationErrors = (errors) => {
  return errors.reduce((acc, value) => {
    return { ...acc, [value.$property]: value.$message }
  }, {})
}

Now let's wrap our composable with a computed property errors:

// @/pages/index.vue

<script setup lang="ts">
const errors = computed(() => useValidationErrors<IForm>(v$.value.$errors))
</script>

Note that I haven't imported my composable anywhere, Nuxt 3.0 does that for you.
For JavaScript developers: just remove <IForm> from useValidationErrors

If you click on the submit button again now in the Vue DevTools you will see our errors computed property being populated.

If you start typing the email the error will change

Finally let's update our markup of the v-text-field component with error and error-messages props:

<v-form @submit.prevent="validate()" class="form">
      <v-container>
        <v-row>
          <v-col cols="12">
            <v-text-field
              v-model="v$.firstName.$model"
              label="First Name"
              variant="solo"
              :error="v$.firstName.$error"
              :error-messages="errors.firstName"
            />
          </v-col>

          <v-col cols="12">
            <v-text-field
              v-model="v$.lastName.$model"
              label="Last Name"
              variant="solo"
              :error="v$.lastName.$error"
              :error-messages="errors.lastName"
            />
          </v-col>

          <v-col cols="12">
            <v-text-field
              v-model="v$.email.$model"
              label="E-mail"
              variant="solo"
              :error="v$.email.$error"
              :error-messages="errors.email"
            />
          </v-col>

          <v-col cols="12">
            <v-textarea
              v-model="v$.message.$model"
              label="Message"
              variant="solo"
              :error="v$.message.$error"
              :error-messages="errors.message"
            />
          </v-col>

          <v-col cols="12">
            <v-text-field
              v-model="v$.password.$model"
              label="Password"
              variant="solo"
              :error="v$.password.$error"
              :error-messages="errors.password"
            />
          </v-col>

          <v-col cols="12">
            <v-btn
              type="submit"
              color="success"
            >
              Submit
            </v-btn>
          </v-col>
        </v-row>
      </v-container>
    </v-form>

And voilà!

Gif of the final result is here

gaisinskii / vuelidate-handling-errors

Nuxt 3 Minimal Starter

Look at the nuxt 3 documentation to learn more.

Setup

Make sure to install the dependencies:

# yarn
yarn install

# npm
npm install

# pnpm
pnpm install --shamefully-hoist

Development Server

Start the development server on http://localhost:3000

npm run dev

Production

Build the application for production:

npm run build

Locally preview production build:

npm run preview

Checkout the deployment documentation for more information.

View on GitHub

Credits

I have to thank @eduardmavliutov and his colleagues for inspiring me to write this article!

Reusable slider component with SwiperJS and NuxtJS

Andrey Gaisinskii — Wed, 02 Dec 2020 17:08:24 +0000

Intro

As you can see in the VueJS docs section for SwiperJS it says:

Swiper Vue.js components are compatible only with new Vue.js version 3

And I immediately got upset because at the time this article is being written, Vue 3.0 is still in preview state, and most of the projects are still running on Vue 2.0.

As for me it feels kinda lame to migrate to Vue 3.0 only because of the swiper library, also there are other options like vue-awesome-swiper, but why would you use a wrapper library that is using old SwiperJS.

So... here is make take:

Preparation

Let's quickly bootstrap our project by running npx create-nuxt-app article-nuxt-swiper in the terminal.

Here are all the options that i have chosen in the CLI:

Now let's move to the directory of our project by running cd article-nuxt-swiper and add some scss by running in the terminal:

using npm:

npm install --save-dev node-sass sass-loader @nuxtjs/style-resources

using yarn:

yarn add --dev node-sass sass-loader @nuxtjs/style-resources

and let's add SwiperJS by running:

using npm:

npm install swiper

using yarn:

yarn add swiper

Then I have disabled buefy css import in nuxt.config.js:

// nuxt.config.js
  modules: [
    // https://go.nuxtjs.dev/buefy
    ['nuxt-buefy', { css: false }],
  ],

And added bulma's and buefy's scss like that:

// nuxt.config.js
  css: [
    '@/assets/scss/main.scss'
  ],

  buildModules: [
    // other stuff
    '@nuxtjs/style-resources'
  ],

  styleResources: {
    scss: ['@/assets/scss/_variables.scss']
  },

// @assets/scss/main.scss
@charset "utf-8";

@import "~bulma";
@import "~buefy/src/scss/buefy";

@import "./_swiper.scss"

// @assets/scss/_variables.scss
$fullhd-enabled: false;

@import "~bulma/sass/utilities/_all.sass";
@import "~buefy/src/scss/utils/_all.scss";

// @assets/scss/_swiper.scss
@import '~swiper/swiper.scss';
@import '~swiper/components/navigation/navigation.scss';
@import '~swiper/components/pagination/pagination.scss';

I have also slightly adjusted some other configs for better TypeScript experience:

// package.json
  "lint-staged": {
    "*.{js,vue}": "eslint"
  },

to:

// package.json
  "lint-staged": {
    "*.{ts,js,vue}": "eslint"
  },

in nuxt.config.js

export default {
// your other stuff 
typescript: {
    typeCheck: {
      eslint: {
        files: './**/*.{ts,js,vue}'
      }
    }
  }
}

in tsconfig.json

{
  // your other stuff
  "compilerOptions": {
    // your other stuff
    "types": [
      "@types/node",
      "@nuxt/types",
      "@nuxtjs/axios"
    ]
  },
}

and in the end have installed nuxt-property-decorator by running:

using npm:

npm install nuxt-property-decorator

using yarn:

yarn add nuxt-property-decorator

Slides

Before we hop into the slider itself, let's first quickly create some markup for our slides. We will have three different types of slides and I will put them into article-nuxt-swiper/components/Slider/templates/<name_of_the_slide>.vue

I will just throw some markup at you:

Slide #1:

<template>
  <div
    :style="`background-image: url(${slide.url})`"
    class="slide-with-big-picture"
  >
    <div class="slide-with-big-picture__main">
      <img class="slide-with-big-picture__picture" :src="slide.thumbnailUrl">
    </div>
    <div class="slide-with-big-picture__description">
      <p class="slide-with-big-picture__text">
        {{ slide.title }}
      </p>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'nuxt-property-decorator'

import { Slide } from '../../../types/components/slides.interface'

@Component({})
export default class SlideWithBigPicture extends Vue {
  @Prop({ required: true, type: Object }) readonly slide!: Slide
}
</script>

<style lang="scss">
.slide-with-big-picture {
  display: flex;
  position: relative;
  height: 252px;
  justify-content: center;
  align-items: center;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
  +tablet-only {
    height: 240px;
  }
  +mobile {
    height: 192px;
  }
  &__main {
    display: flex;
    position: absolute;
    width: 150px;
    height: 150px;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 4px;
    z-index: 3;
  }
  &__bg {
    position: absolute;
  }
  &__picture {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px;
  }
  &__description {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 16px 20px;
    width: 100%;
    height: 94px;
    bottom: 0;
    margin-top: auto;
    background: rgba(32, 42, 37, 0.6);
    color: #fff;
    z-index: 2;
    +mobile {
      height: 74px;
      padding: 12px;
    }
  }
  &__title,
  &__text {
    line-height: 16px;
    +mobile {
      line-height: 12px;
    }
  }
  &__title {
    font-size: 12px;
    margin-bottom: 6px;
    +mobile {
      font-size: 10px;
    }
  }
  &__text {
    font-weight: 500;
    font-size: 16px;
    +mobile {
      font-size: 12px;
    }
  }
}
</style>

Slide #2:

<template>
  <div
    class="slide-with-small-picture"
  >
    <img :src="slide.thumbnailUrl" class="slide-popular-retailer__picture">
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'nuxt-property-decorator'

import { Slide } from '../../../types/components/slides.interface'

@Component({})
export default class SlidePopularRetailer extends Vue {
  @Prop({ required: true, type: Object }) readonly slide!: Slide
}
</script>

<style lang="scss">
.slide-with-small-picture {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: grey;
}
</style>

Slide #3:

<template>
  <div
    class="slide-with-text"
  >
    <span class="slide-with-text__name">{{ slide.title }}</span>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from 'nuxt-property-decorator'

import { Slide } from '../../../types/components/slides.interface'

@Component({})
export default class SlideWithText extends Vue {
  @Prop({ required: true, type: Object }) readonly slide!: Slide
}
</script>

<style lang="scss">
.slide-with-text {
  display: flex;
  position: relative;
  height: 108px;
  justify-content: center;
  align-items: center;
  z-index: 2;
  background:yellow;
  &::after {
    z-index: 1;
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(180deg, rgba(22, 101, 193, 0.18) 0%, rgba(22, 101, 193, 0.63) 0%, rgba(5, 34, 68, 0.9) 147.22%);
  }
  &__name {
    color: #fff;
    font-weight: bold;
    font-size: 16px;
    line-height: 20px;
    text-align: center;
    z-index: 3;
  }
}
</style>

Slider

For better understanding I will break things up into four parts:

markup
coding
styles
and settings for our slider.

Markup

<template>
  <div
    class="slider"
    :class="`slider--${type}`"
  >
    <div
      class="swiper-button-prev"
      :class="`swiper-button-prev--${type}`"
    />
    <div
      class="swiper-button-next"
      :class="`swiper-button-next--${type}`"
    />
    <div
      :class="`swiper-container--${type}`"
      class="swiper-container"
    >
      <div class="swiper-wrapper">
        <div
          v-for="(slide, index) in slides"
          :key="index"
          class="swiper-slide"
        >
          <component :is="getSlide" :slide="slide" />
        </div>
      </div>
      <div class="swiper-pagination" />
    </div>
  </div>
</template>

As you can see there is a lot of :class="`someCssClass--${type}`" thing going on. This type thing is a prop that will be passed to our slider component. And I'm using dynamic classes for easier further styling
The swiper-button-prev, swiper-button-next and swiper-container classes are on the same level, but all of them are inside slider class. That is also done for easier styling of the previous and next navigations buttons, because in get started page of SwiperJS documentation those navigation buttons are within swiper-container, thus making navigation buttons harder to style if you want those buttons to be outside of the slider itself
And the third thing that I want to talk about in our markup is the slide <component :is="getSlide" :slide="slide" />. Here I'm using dynamic components to determine which slide component has to be imported based on the type prop that we have passed to our slider component and we also pass a slide prop to the slide with some data that will be displayed in that slide

Coding

I've made some comments in the code, other important stuff will be written below the code. If there is some frustration regarding typescript, please, leave a comment and I will try to help you in my spare time.

<script lang="ts">
// this is needed for typescript, omit if you are using javascript
import { Vue, Component, Prop } from 'nuxt-property-decorator'

// here we import SwiperJS library, you can name the way you want,
// for e.g. - SwiperInstance, SwiperCore or just Swiper
import SwiperInstance, { Navigation, Pagination, A11y } from 'swiper'

// this is needed for typescript, omit if you are using javascript
import { SwiperOptions, Swiper } from 'swiper/swiper.d'
// this is needed for typescript, omit if you are using javascript
import { Slide } from '../../types/components/slides.interface'

// Here we import our settings from a separate .ts file
// We will talk about it a bit later.
import settings from './settings'

// Here we configure out Swiper to use additional modules
SwiperInstance.use([Navigation, Pagination, A11y])

const SlideWithBigPicture = () => import('./templates/SlideWithBigPicture.vue')
const SlideWithSmallPicture = () => import('./templates/SlideWithSmallPicture.vue')
const SlideWithText = () => import('./templates/SlideWithText.vue')

@Component({
  components: {
    SlideWithBigPicture,
    SlideWithSmallPicture,
    SlideWithText
  }
})
export default class Slider extends Vue {
  @Prop({ required: true, type: Array }) readonly slides!: Slide[]
  @Prop({ required: true, type: String }) readonly type!: string

  private swiperInstance: Swiper = {} as Swiper

  private settings: SwiperOptions = settings[this.type]

  get getSlide () {
    switch (this.type) {
      case 'with-small-picture':
        return 'SlideWithSmallPicture'
      case 'with-text':
        return 'SlideWithText'
      case 'with-big-picture':
        return 'SlideWithBigPicture'
      default:
        break
    }
  }

  mounted () {
    this.swiperInstance = new SwiperInstance(`.swiper-container--${this.type}`, this.settings)
  }
}
</script>

As I have already mentioned I'm using dynamic components along with their async importing like that:


    const SlideWithBigPicture = () =>         
    import('./templates/SlideWithBigPicture.vue')
    const SlideWithSmallPicture = () => 
    import('./templates/SlideWithSmallPicture.vue')
    const SlideWithText = () => 
    import('./templates/SlideWithText.vue')

And then I register them as usual in the components object of
VueJS:


    @Component({
      components: {
        SlideWithBigPicture,
        SlideWithSmallPicture,
        SlideWithText
      }
    })

Then we define two props in the slider component: type that will tell which slide component to load and slides that is an array of our slides


    @Prop({ required: true, type: Array }) readonly slides!: Slide[]
    @Prop({ required: true, type: String }) readonly type!: string

Then we define two properties: swiperInstance which will hold our SwiperJS object and settings which will hold settings of our slider.
```
    private swiperInstance: Swiper = {} as Swiper

    private settings: SwiperOptions = settings[this.type]
```
Also, I want to mention that I do this: settings[this.type],
I'm doing it because the settings that we import into the slider
component can be a huge object with a lot of settings for each
slide type, by accessing only one property from this object we
are cutting a lot of useless data.

Then we have this:


  get getSlide () {
    switch (this.type) {
      case 'with-small-picture':
        return 'SlideWithSmallPicture'
      case 'with-text':
        return 'SlideWithText'
      case 'with-big-picture':
        return 'SlideWithBigPicture'
      default:
        break
    }
  }

Our get getSlide () {} is a computed property inside of which there
is a switch statement that takes our type prop as an argument
and returns a corresponding VueJS component.

And finally we have this:
```
    mounted () {
        this.swiperInstance = new SwiperInstance(`.swiper-container--${this.type}`, this.settings)
   }
```
Here we are passing our imported SwiperInstance into VueJS
property and with a class name of our slider as first argument
and settings for a slider as a second argument.

We do everything in the mounted hook because
we need our markup to be already rendered in order for SwiperJS
to pick it up and initiate.

Styles

Screw this, I'm just throwing some scss at you:

<style lang="scss">
.slider {
  position: relative;
  .swiper-button-next,
  .swiper-button-prev {
    outline: none;
  }
  .swiper-container {
    z-index: unset;
  }
}

.slider--with-big-picture {
  .swiper-button-next,
  .swiper-button-prev {
    @include touch {
      display: none;
    }
    display: inline-flex;
    top: -56px;
    left: unset;
    right: 0px;
    bottom: unset;
    margin: auto;
    width: 32px;
    height: 32px;
    border: 1px solid #000;
    border-radius: 50%;
    outline: none;
    &::after {
      font-size: 10px;
      color: #000;
      font-weight: bold;
    }
  }
  .swiper-button-prev {
    right: 44px;
  }
  .swiper-pagination {
    display: flex;
    position: static;
    justify-content: center;
    margin-top: 20px;
    @include mobile {
      margin-top: 12px;
    }
    .swiper-pagination-bullet {
      margin-right: 8px;
    }
    .swiper-pagination-bullet-active {
      background-color: blue;
    }
  }
}

.slider--with-small-picture,
.slider--with-text {
  @include tablet-only {
    margin-right: -40px;
  }
  @include mobile {
    margin-right: -16px;
  }
  .swiper-pagination {
    display: none;
  }
  .swiper-button-disabled {
    display: none;
  }
  .swiper-button-prev,
  .swiper-button-next {
    @include touch {
      display: none;
    }
    height: 40px;
    width: 40px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);
    &::after {
      font-size: 14px;
      color: #000;
      font-weight: bold;
    }
  }
  .swiper-button-next {
    right: -20px;
  }
  .swiper-button-prev {
    left: -20px;
  }
}

</style>

Settings

So here is out settings object:

// this is needed for typescript, omit if you are using javascript
import { SwiperOptions } from 'swiper/types/swiper-options'

// : { [key: string]: SwiperOptions } is for typescript users
const settings: { [key: string]: SwiperOptions } = {
  'with-small-picture': {
    slidesPerView: 2.5,
    slidesPerGroup: 1,
    slidesOffsetAfter: 16,
    spaceBetween: 8,
    navigation: {
      nextEl: '.swiper-button-next--with-small-picture',
      prevEl: '.swiper-button-prev--with-small-picture'
    },
    breakpoints: {
      769: {
        slidesPerView: 4.5,
        slidesPerGroup: 1.5,
        spaceBetween: 16,
        slidesOffsetAfter: 40
      },
      1024: {
        slidesPerView: 5.5,
        slidesPerGroup: 5.5,
        slidesOffsetAfter: 0,
        spaceBetween: 16
      }
    }
  },
  'with-text': {
    slidesPerView: 1.75,
    slidesPerGroup: 1,
    centeredSlides: true,
    centeredSlidesBounds: true,
    slidesOffsetAfter: 16,
    spaceBetween: 8,
    navigation: {
      nextEl: '.swiper-button-next--with-text',
      prevEl: '.swiper-button-prev--with-text'
    },
    breakpoints: {
      769: {
        slidesPerView: 3.2,
        centeredSlides: false,
        centeredSlidesBounds: false,
        slidesPerGroup: 1.2,
        spaceBetween: 16,
        slidesOffsetAfter: 40
      },
      1024: {
        slidesPerView: 4,
        slidesPerGroup: 4,
        slidesOffsetAfter: 0,
        spaceBetween: 16
      }
    }
  },
  'with-big-picture': {
    slidesPerView: 1,
    spaceBetween: 16,
    pagination: {
      el: '.swiper-pagination',
      clickable: true
    },
    navigation: {
      nextEl: '.swiper-button-next--with-big-picture',
      prevEl: '.swiper-button-prev--with-big-picture'
    },
    breakpoints: {
      769: {
        slidesPerView: 2
      },
      1024: {
        slidesPerView: 3,
        slidesPerGroup: 3
      }
    }
  }
}

export default settings

Our const settings = {} is an object that holds three child objects, each of one has a name of the slide as a key property and contains properties of SwiperJS. As I already said, in Slide.vue we do this: private settings: SwiperOptions = settings[this.type] so we accessing only one child object of settings object.

Final

Well, that's it.

Now we only have to create a page and import our slider with different type props.

<template>
  <main class="page--main">
    <div class="container">
      <slider
        class="page__slider"
        type="with-big-picture"
        :slides="slides"
      />

      <slider
        class="page__slider"
        type="with-small-picture"
        :slides="slides"
      />

      <slider
        type="with-text"
        class="page__slider"
        :slides="slides"
      />
    </div>
  </main>
</template>

<script lang="ts">
import { Vue, Component } from 'nuxt-property-decorator'

import Slider from '../components/Slider/Slider.vue'

import { Slide } from '../types/components/slides.interface'

@Component({
  components: {
    Slider
  },
  async asyncData ({ $axios }) {
    try {
      const response = await $axios.$get('https://jsonplaceholder.typicode.com/photos?_start=0&_limit=10')
      return {
        slides: response
      }
    } catch (error) {

    }
  }
})
export default class MainPage extends Vue {
  private slides: Slide[] = []
}
</script>

<style lang="scss">
.page--main {
  padding: 100px 0px;
  .page {
    &__slider {
      &:not(:last-of-type) {
        margin-bottom: 40px;
      }
    }
  }

  .container {
    @include touch {
      padding: 0px 40px;
    }
    @include mobile {
      padding: 0px 16px;
    }
  }
}
</style>

And voilà! Here we have it!

Links

GitHub repo can be found here - https://github.com/andynoir/article-nuxt-swiper

Live preview can be found here - https://andynoir.github.io/article-nuxt-swiper/

Sitemap for dynamic routes in NuxtJS

Andrey Gaisinskii — Tue, 13 Oct 2020 12:35:06 +0000

Motivation

As for the date of writing this post it is impossible to dynamically generate sitemap.xml in NuxtJS for dynamic routes using @nuxtjs/sitemap.

As the documentation for the module says, you have manually type all your dynamic routes into the routes array of sitemap object in nuxt.config.js.

// nuxt.config.js
{
  sitemap: {
    hostname: 'https://example.com',
    gzip: true,
    exclude: [
      '/secret',
      '/admin/**'
    ],
    routes: [
      'dynamic-route-one',
      'dynamic-route-two',
    ]
  }
}

There is also another way, where you have to create a script that will make all the API calls to your backend server then will generate an array of routes that the sitemap object in the nuxt.config.js will then consume. More on that you can search for yourself or take a look at this article.

But I was very curious if there is another way, because it can be a pain the in the ass to type in all the dynamic routes manually or to make a lot of the API calls.

Disclaimer

After reading this post you might think that this way of generating
sitemap for dynamic routes is a bit hacky. And you are absolutely true. There is only one official way of doing it. Use at your own risk.

Watered down theory

Since Nuxt v2.13 a new option in nuxt.config.js is available:

// nuxt.config.js
export default {
  generate: {
    crawler: false // default - true
  }
}

A quote from the documentation:

As of Nuxt >= v2.13 Nuxt.js comes with a crawler installed that will crawl your relative links and generate your dynamic links based on these links. If you want to disable this feature you can set the value to false.

I have created a repository which has both dynamic and static routes and if we run npm run generate in the terminal we can see our dynamic routes being generated as individual html files:

But also you can see that the path to the dynamic route being printed out into the terminal, eg. - Generated route "/users/10". So if it is printed out, maybe it is stored somewhere and we can obtain it or we can capture it while it is being printed out and we can store it.

Coding part

Lets quickly install @nuxtjs/sitemap module by typing in the terminal:

npm install @nuxtjs/sitemap
or
yarn add @nuxtjs/sitemap

then add it to nuxt.config.js like this:

// nuxt.config.js
modules: [
    // your other modules
    '@nuxtjs/sitemap'
  ],

and configure it like this:

// nuxt.config.js
sitemap: {
    hostname: 'https://my-host.com',
    gzip: true,
    exclude: [
      '/exclude-one',
      '/exclude-two'
    ],
    defaults: {
      changefreq: 'daily',
      priority: 1,
      lastmod: new Date()
    }
  },

By running npm run generate again the in terminal we can ensure that dynamic routes are being generated but not being added to the sitemap.xml

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1" xmlns:xhtml="http://www.w3.org/1999/xhtml">
   <url>
      <loc>https://my-host.com/albums</loc>
      <lastmod>2020-10-13T11:19:36.882Z</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>https://my-host.com/todos</loc>
      <lastmod>2020-10-13T11:19:36.882Z</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>https://my-host.com/users</loc>
      <lastmod>2020-10-13T11:19:36.882Z</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>https://my-host.com/</loc>
      <lastmod>2020-10-13T11:19:36.882Z</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
</urlset>

In order to obtain those generated routes paths we will use NuxtJS hooks which can be used in the NuxtJS modules.

To create a module just make a modules folder in your project directory with a file inside called generator.ts

Note: I am using TypeScript here, if you are using vanilla JavaScript it should be generator.js

// nuxt.config.js
 buildModules: [
    // other build modules
    '@/modules/generator'
  ],

Inside the generator.ts paste the following code and let's reflect on it a little bit.

import { Module } from '@nuxt/types'

const generator: Module = function () {
  this.nuxt.hook('generate:done', async (context: any) => {
    const routesToExclude: string[] =
    process.env.NUXT_ENV_EXCLUDE_ROUTES
      ? process.env.NUXT_ENV_EXCLUDE_ROUTES.split(',') : []
    const allRoutes: string[] = await Array.from(context.generatedRoutes)
    const routes: string[] = await allRoutes.filter((route: string) => !routesToExclude.includes(route))
    this.nuxt.options.sitemap.routes = await [...routes]
  })
}

export default generator

1) We have defined a generator function that is exported and will be injected into NuxtJS.
2) We have subscribed to a generate:done hook and upon hook completion the code inside the function will be executed.
3) If you take a look here you will see that a certain context will be returned by the hook. If you console.log that context inside our module, you will see a generatedRoutes Set
4) Inside routesToExclude I use a ternary operator to ensure that I do have some data in my NUXT_ENV_EXCLUDE_ROUTES environment variable:

// .env
NUXT_ENV_EXCLUDE_ROUTES = '/exclude-one,/exclude-two'

Then I divide my string into substrings to become an array of strings by using .split method.
5) Inside allRoutes I transform Set into an Array by using Array.from method.
6) I filter out all the routes I want to exclude by using filter method in routes
7) And lastly i spread my filtered routes into the routes property of the sitemap object: this.nuxt.options.sitemap.routes = await [...routes]

Now if you run npm run generate again you will see dynamic routes in the sitemap.xml

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1" xmlns:mobile="http://www.google.com/schemas/sitemap-mobile/1.0" xmlns:news="http://www.google.com/schemas/sitemap-news/0.9" xmlns:video="http://www.google.com/schemas/sitemap-video/1.1" xmlns:xhtml="http://www.w3.org/1999/xhtml">
   <url>
      <loc>https://my-host.com/albums</loc>
      <lastmod>2020-10-13T12:09:44.775Z</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>https://my-host.com/todos</loc>
      <lastmod>2020-10-13T12:09:44.775Z</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>https://my-host.com/users</loc>
      <lastmod>2020-10-13T12:09:44.775Z</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>https://my-host.com/</loc>
      <lastmod>2020-10-13T12:09:44.775Z</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>https://my-host.com/users/1</loc>
      <lastmod>2020-10-13T12:09:44.775Z</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>https://my-host.com/users/2</loc>
      <lastmod>2020-10-13T12:09:44.775Z</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>https://my-host.com/users/3</loc>
      <lastmod>2020-10-13T12:09:44.775Z</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>https://my-host.com/users/4</loc>
      <lastmod>2020-10-13T12:09:44.775Z</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>https://my-host.com/users/5</loc>
      <lastmod>2020-10-13T12:09:44.775Z</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>https://my-host.com/users/6</loc>
      <lastmod>2020-10-13T12:09:44.775Z</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>https://my-host.com/users/7</loc>
      <lastmod>2020-10-13T12:09:44.775Z</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>https://my-host.com/users/8</loc>
      <lastmod>2020-10-13T12:09:44.775Z</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>https://my-host.com/users/9</loc>
      <lastmod>2020-10-13T12:09:44.775Z</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
   <url>
      <loc>https://my-host.com/users/10</loc>
      <lastmod>2020-10-13T12:09:44.775Z</lastmod>
      <changefreq>daily</changefreq>
      <priority>1.0</priority>
   </url>
</urlset>

For those who are not familiar with TypeScript

Leave a comment below or DM me, i will try to help you out.

Links

Live preview can be found here - https://andynoir.github.io/article-nuxt-dynamic-sitemap/
Sitemap here https://andynoir.github.io/article-nuxt-dynamic-sitemap/sitemap.xml
GitHub repo here - https://github.com/andynoir/article-nuxt-dynamic-sitemap

Draggable table row with VueJS, Vuetify and SortableJS

Andrey Gaisinskii — Sun, 21 Jun 2020 17:16:56 +0000

TLDR At the bottom of the article you will find a link to the GitHub repo.

Prologue

Recently I have had to implement draggable rows for a vuetify table and right off the bat started searching in the docs and the webs for a solution. And came across this article written by Abhay Wawale and some other answers on StackOverflow & CodePen.

The article is great, but I was concerned about manipulating the DOM directly. As for me it is a bit hacky.

My Solution

Instead of accessing the item slot in v-data-table I decided to mess around with the body slot. Basically body slot is your <tbody> html tag and it is very nice since we need a tag prop for vuedraggable component which is a wrapper for SortableJS.

    <v-data-table>
      <template v-slot:body="props">
        <draggable
          :list="props.items"
          tag="tbody"
        >
          <!-- the row will go here -->
        </draggable>
      </template>
    </v-data-table>

Now to the rows, you just have to loop through the array of items that you pass into your v-data-table items prop. Those items will be exposed in the body slot and can be accessed as follows:

          <tr
            v-for="(item, index) in props.items"
            :key="index"
          >
            <td> {{ item.your-property-here }} </td>
          </tr>

Let's add some actual data and make our table more fancy:

    <v-data-table
      :headers="tableHeaders"
      :items="tableItems"
      :loading="loading"
      item-key="id"
      :show-select="false"
      :disable-pagination="true"
      :hide-default-footer="true"
      class="page__table"
    >
      <template v-slot:body="props">
        <draggable
          :list="props.items"
          tag="tbody"
        >
          <tr
            v-for="(user, index) in props.items"
            :key="index"
          >
            <td>
              <v-icon
                small
                class="page__grab-icon"
              >
                mdi-arrow-all
              </v-icon>
            </td>
            <td> {{ index + 1 }} </td>
            <td> {{ user.id }} </td>
            <td> {{ user.name }} </td>
            <td> {{ user.username }} </td>
            <td> {{ user.email }} </td>
            <td> {{ user.website }} </td>
            <td>
              <v-icon
                small
                @click="editUser(user.id)"
              >
                mdi-pencil
              </v-icon>
            </td>
          </tr>
        </draggable>
      </template>
    </v-data-table>

Our table will look like this and draggable rows are working!

Thanks for reading!

Code can be found here and live preview here