search

ferdinandfrank / vue-forms

Set of Vue.js components to submit forms with ajax.
https://ferdinandfrank.github.io/vue-forms/
MIT License
5 stars 0 forks source link

Laravel Mix compiling error #2

Closed pieinn closed 6 years ago

pieinn commented 6 years ago

I install your package step by step:

step 7

npm run dev (Laravel Mix) error in ./resources/assets/vendor/vue-forms/js/components/inputs/FormCheckbox.vue error in ./resources/assets/vendor/vue-forms/js/components/inputs/FormTextarea.vue error in ./resources/assets/vendor/vue-forms/js/components/inputs/FormSwitch.vue error in ./resources/assets/vendor/vue-forms/js/components/inputs/FormDateInput.vue error in ./resources/assets/vendor/vue-forms/js/components/inputs/FormSelect.vue error in ./resources/assets/vendor/vue-forms/js/components/AjaxForm.vue error in ./resources/assets/sass/app.scss // i use bootstrap 4

ferdinandfrank commented 6 years ago

Can't replicate this problem on a fresh Laravel installation. Did you skipped any of the optional JS requirements? If so, you have to first edit the corresponding components within your \resources\assets\vendor folder after calling php artisan vue-forms:init.

pieinn commented 6 years ago

"devDependencies": { "axios": "^0.17", "bootstrap": "^4.0.0-beta.2", "cross-env": "^5.1", "jquery": "^3.2", "laravel-mix": "^1.0", "lodash": "^4.17.4", "sweetalert": "^2.0.4", "popper.js": "^1.12.6", "tooltip.js": "^1.1.5", "vue": "^2.1.10" }, "dependencies": { "moment": "^2.19.2" }

pieinn commented 6 years ago

When i delete this files from vendor/vue-forms/js/components.js:

import ajaxForm from "./components/AjaxForm.vue"; import formButton from "./components/buttons/FormButton.vue"; import formInput from "./components/inputs/FormInput.vue"; import hiddenInput from "./components/inputs/HiddenInput.vue"; import formTextarea from "./components/inputs/FormTextarea.vue"; import formRadio from "./components/inputs/FormRadio.vue"; import formCheckbox from "./components/inputs/FormCheckbox.vue"; import formSwitch from "./components/inputs/FormSwitch.vue"; import formLink from "./components/buttons/FormLink.vue"; import formSelect from "./components/inputs/FormSelect.vue"; import formDateInput from "./components/inputs/FormDateInput.vue"; import removeButton from "./components/buttons/RemoveButton.vue"; import icon from "./components/Icon.vue";

And @import "~bootstrap-sass/assets/stylesheets/bootstrap"; from the this file /vendor/vue-forms/scss/vue-forms.scss

No any errors!

pieinn commented 6 years ago

Please advice how to show loading button when click submit btn?

form.txt

ferdinandfrank commented 6 years ago

Make sure you use the npm package bootstrap-sass and not bootstrap if you want to have the bootstrap layout. Otherwise just remove the line @import "~bootstrap-sass/assets/stylesheets/bootstrap"; from the the file /vendor/vue-forms/scss/vue-forms.scss and replace it with your bootstrap import.

Further, I tried to compile the files with your dependencies as well and I received no errors. Are there any detailed errors (error messages) on your console?

The import statements you removed from vendor/vue-forms/js/components.js are essential to use this package, so you should keep them.

The loading button will only be shown, if you wrap your form with the component tag <ajax-form> instead of form and place a submit button in it. Short example for a form with only one text input:

<ajax-form method="post" action="/anywhere/on/your/server">
   <form-input name="text" label="text"></form-input>
   <button class="btn btn-success" type="submit">Submit</button>
</ajax-form>

Note: To show the loading icon, you need to install FontAwesome. If you are using an other icon set you can replace this loading icon by setting the data variable loadingContent in resources/assets/vendor/vue-forms/js/mixins/AjaxFormMixin.js.

pieinn commented 6 years ago

Thank you for detailed reply. I will try now

pieinn commented 6 years ago

Just install npm install vue npm install vue-template-compiler

All compiles - No Errors

But ajax-form not working