ClientSide validation not working with vue

[Stehos]

Describe the bug Hello, does the client-side validation working with Laravel + Vue?

I am facing the following:

`

Vue warn]: Error compiling template:

Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.

352|  </button>
353|    
354|    <script defer="">
   |   ^^^^^^^^^^^^^^^^^
355|  !function(){"use strict";function a(e){if("string"==typeof e){var t=e.indexOf(".");0<t&&t<=6&&(e=e.replace(/\./g,"-"))}var r,i=new Date(e),a=i.getFullYear(),n=i.getMonth(),s=i.getDate(),u=[31,(r=a)%4==0&&r%100!=0||r%400==0?29:28,31,30,31,30,31,31,30,31,30,31];return!(a<1e3)&&(!isNaN(n)&&(!(12<n+1)&&(!isNaN(s)&&!(u[n]<s))))}var r,n={required:function(e){return null!=e&&0<String(e).replace(/\s/g,"").length},required_if:function(e,t,r){return t=this.getParameters(),this.validator._objectPath(this.validator.input,t[0])!==t[1]||this.validator.getRule("required").validate(e)},required_unless:function(e,t,r){return t=this.getParameters(),this.validator._objectPath(this.validator.input,t[0])===t[1]||this.va…
app.js:55466:15
[Vue warn]: Error compiling template:

Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.

357|  </script>
358|  
359|            <script defer="">
   |     ^^^^^^^^^^^^^^^^^
360|            document.addEventListener('DOMContentLoaded', function() {
   |  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
361|                Aire.configure({"templates":{"error":{"prefix":"<li class=\"block mt-1 text-red-500 text-sm font-bold\">","suffix":"<\/li>"}},"classnames":{"none":{"input":"","select":"text-gray-900","textarea":"text-gray-900","group_errors":"hidden","group_help_text":"text-gray-600"},"valid":{"label":"text-green-600","input":"border-green-600 text-green-700","select":"border-green-600 text-green-700","textarea":"border-green-600 text-green-700","group_errors":"hidden","group_help_text":"text-green-600 opacity-50"},"invalid":{"label":"text-red-600","input":"border-red-600 text-red-700","select":"border-red-600 text-red-700","textarea":"border-

`

The problem is probably due to Vue "root" element and I have "App" container inside the body element.

Thank you.

Have you published the Aire config file? Yes

Have you added custom Aire views? No

What version does this affect?

• Laravel Version: 8.12
• Aire Version: 2.4

[inxilpro]

Hm. I'm not really sure what's going on here based on the error you've provided. Are you trying to use Aire inside a Vue template?

[Stehos]

@inxilpro sorry for the late reply. Yes, I tried to use Aire in the regular blade template but it's not working since I use Vue in Laravel project. I can turn off the Vue for this one subpage but I think that the problem is in the "way" how the javascript for validation is inserted into code and maybe there exists a better way, how can we deal with it.