title: Add validation vee-validate to vue file
body: <p>I am beginner web developer.
  I try make simple application in vue.</p>
  <p>I have this code:</p>
  <pre><code>&lt;template&gt;
    &lt;CRow&gt;
      &lt;CCol col=&quot;12&quot; lg=&quot;6&quot;&gt;
        &lt;CCard no-header&gt;
          &lt;CCardBody&gt;
            &lt;h3&gt;
              Create Note
            &lt;/h3&gt;
            &lt;CAlert
              :show.sync=&quot;dismissCountDown&quot;
              color=&quot;primary&quot;
              fade
            &gt;
              ({{ dismissCountDown }}) {{ message }}
            &lt;/CAlert&gt;
  
            &lt;CInput label=&quot;Title&quot; type=&quot;text&quot; id=&quot;title&quot; placeholder=&quot;Title&quot; v-model=&quot;note.title&quot;&gt;&lt;/CInput&gt;
  
            &lt;CInput textarea=&quot;true&quot; label=&quot;Content&quot; id=&quot;content&quot; :rows=&quot;9&quot; placeholder=&quot;Content..&quot;
                    v-model=&quot;note.content&quot;&gt;&lt;/CInput&gt;
  
            &lt;CInput label=&quot;Applies to date&quot; type=&quot;date&quot; id=&quot;applies_to_date&quot; v-model=&quot;note.applies_to_date&quot;&gt;&lt;/CInput&gt;
  
            &lt;CSelect id=&quot;status_id&quot;
                     label=&quot;Status&quot;
                     :value.sync=&quot;note.status_id&quot;
                     :plain=&quot;true&quot;
                     :options=&quot;statuses&quot;
            &gt;
            &lt;/CSelect&gt;
            &lt;CInput label=&quot;Note type&quot; type=&quot;text&quot; id=&quot;note_type&quot; v-model=&quot;note.note_type&quot;&gt;&lt;/CInput&gt;
  
            &lt;template&gt;
              &lt;div id=&quot;app&quot;&gt;
                &lt;ckeditor v-model=&quot;editorData&quot; :config=&quot;editorConfig&quot;&gt;&lt;/ckeditor&gt;
              &lt;/div&gt;
            &lt;/template&gt;
  
            &lt;CButton color=&quot;primary&quot; @click=&quot;store()&quot;&gt;Create&lt;/CButton&gt;
            &lt;CButton color=&quot;primary&quot; @click=&quot;goBack&quot;&gt;Back&lt;/CButton&gt;
          &lt;/CCardBody&gt;
        &lt;/CCard&gt;
      &lt;/CCol&gt;
    &lt;/CRow&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import axios from 'axios';
  import Vue from 'vue';
  import CKEditor from 'ckeditor4-vue';
  import Swal from &quot;sweetalert2&quot;;
  
  Vue.use(CKEditor);
  
  export default {
    name: 'EditUser',
    props: {
      caption: {
        type: String,
        default: 'User id'
      },
    },
    data: () =&gt; {
      return {
        note: {
          title: '',
          content: '',
          applies_to_date: '',
          status_id: null,
          note_type: '',
        },
        statuses: [],
        message: '',
        dismissSecs: 7,
        dismissCountDown: 0,
        showDismissibleAlert: false,
  
        editorData: '',
        editorConfig: {
          // The configuration of the editor.
          filebrowserImageBrowseUrl: Vue.prototype.$apiAdress+'/api/laravel-filemanager?token=' + localStorage.getItem(&quot;api_token&quot;),
          filebrowserImageUploadUrl: Vue.prototype.$apiAdress+'/api/laravel-filemanager/upload?type=Images&amp;amp;_token=&amp;token=' + localStorage.getItem(&quot;api_token&quot;),
          filebrowserBrowseUrl: Vue.prototype.$apiAdress+'/api/laravel-filemanager?type=Files&amp;token=' + localStorage.getItem(&quot;api_token&quot;),
          filebrowserUploadUrl: Vue.prototype.$apiAdress+'/api/laravel-filemanager/upload?type=Files&amp;amp;_token=&amp;token=' + localStorage.getItem(&quot;api_token&quot;),
          height: 500,
          language: 'pl',
          //extraPlugins: 'facebookvideo, youtube, html5video',
          editorUrl: &quot;facebookvideo.js&quot;,
          extraPlugins: 'a11yhelp,about,basicstyles,bidi,blockquote,clipboard,colorbutton,colordialog,contextmenu,copyformatting,dialogadvtab,div,editorplaceholder,elementspath,enterkey,entities,exportpdf,filebrowser,find,flash,floatingspace,font,format,forms,horizontalrule,htmlwriter,iframe,image,indentblock,indentlist,justify,language,link,list,liststyle,magicline,maximize,newpage,pagebreak,pastefromgdocs,pastefromlibreoffice,pastefromword,pastetext,preview,print,removeformat,resize,save,scayt,selectall,showblocks,showborders,smiley,sourcearea,specialchar,stylescombo,tab,table,tableselection,tabletools,templates,toolbar,undo,uploadimage, wysiwygarea,autoembed,image2,embedsemantic',
          image2_alignClasses: ['image-align-left', 'image-align-center', 'image-align-right'],
          image2_disableResizer: true,
        }
      }
    },
    methods: {
      goBack() {
        this.$router.go(-1)
        // this.$router.replace({path: '/users'})
      },
      store() {
        if(this.checkInputs()) return;
        let self = this;
        axios.post(this.$apiAdress + '/api/notes?token=' + localStorage.getItem(&quot;api_token&quot;),
          self.note
        )
          .then(function (response) {
            self.note = {
              title: '',
              content: '',
              applies_to_date: '',
              status_id: null,
              note_type: '',
            };
            self.message = 'Successfully created note.';
            self.showAlert();
          }).catch(function (error) {
          if (error.response.data.message == 'The given data was invalid.') {
            self.message = '';
            for (let key in error.response.data.errors) {
              if (error.response.data.errors.hasOwnProperty(key)) {
                self.message += error.response.data.errors[key][0] + '  ';
              }
            }
            self.showAlert();
          } else {
            console.log(error);
            self.$router.push({path: 'login'});
          }
        });
      },
      checkInputs() {
        if(!this.note.title || !this.note.content) {
          Swal.fire(
            'Błąd',
            'Proszę wypełnić wszystkie pola oznaczone gwiazdką!',
            'error'
          )
          return true
        }
        return false
      },
      countDownChanged(dismissCountDown) {
        this.dismissCountDown = dismissCountDown
      },
      showAlert() {
        this.dismissCountDown = this.dismissSecs
      },
    },
    mounted: function () {
      let self = this;
      axios.get(this.$apiAdress + '/api/notes/create?token=' + localStorage.getItem(&quot;api_token&quot;))
        .then(function (response) {
          self.statuses = response.data;
        }).catch(function (error) {
        console.log(error);
        self.$router.push({path: 'login'});
      });
    }
  }
  
  &lt;/script&gt;
  </code></pre>
  <p>I need instal to this view: <a href="https://vee-validate.logaretm.com/v4/" rel="nofollow noreferrer">https://vee-validate.logaretm.com/v4/</a></p>
  <p>I write in terminal npm install vee-validate@next --save</p>
  <p>What next?</p>
  <p>In my project I have CInput. In documentation is:</p>
  <pre><code>&lt;Form v-slot=&quot;{ errors }&quot;&gt;
    &lt;Field name=&quot;field&quot; :rules=&quot;isRequired&quot; /&gt;
    &lt;span&gt;{{ errors.field }}&lt;/span&gt;
  &lt;/Form&gt;
  </code></pre>
  <p>My actually code is wrong?
  This is my first application.</p>
  <p>Please help me :)</p>