Vue.js 2 Design Patterns and Best Practices

Adding recipes

Let's make a new route under pages/Recipes/new.vue; this will then generate a route to localhost:3000/recipes/new. Our implementation will be simple; for example, having recipe steps as string may not be the best idea for production, but it allows us to achieve our goal(s) in development.

We can then add the appropriate data object and validation(s) with Vuelidate:

import { required, minLength } from 'vuelidate/lib/validators'export default {  data () {    return {      title: '',      image: '',      steps: '',      categoryId: 1    }  },  validations: {    title: {      required,      minLength: minLength(4)    },    image: {      required    },    steps: {      required,      minLength: minLength(30)    }  },}

Next up, we can add the appropriate template, which includes everything from validation ...