Why is the way that Vue is integrated into a project so different? The basic tutorial from the Vue documentation is to place the script inside the head of the file .html
and in another script have the following:
new Vue({
el: '#app',
data: {
estado: 'Critico'
}
})
while when I create a project with Vue Cli the file main.js
has the following:
import Vue from 'vue'
import App from './App.vue'
new Vue({
el:'#app',
render: h => h(App)
})
And with Laravel the code of the file app.js
is:
require('./bootstrap');
window.Vue = require('vue');
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
const app = new Vue({
el: '#app',
});
and the file bootstrap.js
that seems to add extras like vue axios:
window._ = require('lodash');
try {
window.Popper = require('popper.js').default;
window.$ = window.jQuery = require('jquery');
require('bootstrap');
} catch (e) {}
window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
And I have many questions. Why does the property render:
of the third instance that is shown disappear?
Why the second uses import
while the third uses require
? They both work with Node, right?
Because the first line of the file bootstrap.js
is assigned a require('lodash')
to the attribute_
What do you recommend learning before moving forward with Vue? I know some basic javascript because I was recommended to learn Vanilla JS before using any framework, but see the file bootstrap.js
with window.$
, assigning a value to it, and assigning another value to the latter on the same line. I get quite confused.
Vue allows you to work with it like:
Option 1
Dependency on a project and include it in the traditional way as you did with JQuery, that is, you invoke it at the end of your HTML document through the tag
script
through thesrc
.For the above case you are only requiring Vue as a working plugin in a new or existing project in X language or X framework.
Where the syntax to handle will be the following:
Option 2
Vue CLI allows you to create a project where Vue can work as the complete frontend and the language in use in this part is entirely JavaScript, where we only seek to consume the data generated by certain endpoints of a project in X language or framework.
Here one of the first differences is already generated, which is:
appname/src/components
.vue
template
,script
andstyle
Code
Refers to the syntax of modules in NodeJS
Update
Option 3
In the case of Laravel, remember that for its use of webpack, it has laravel mix that will point to
app.js
as the destination file where all the scripts will compile and store the result of said action.Although technically in Laravel you could include Vue as a classic call via:
Laravel gives you the opportunity to require it through NodeJS, since in the main folder of the project you can find a package.json where Vue is already declared as a dependency, which you can use as:
npm install
That said, in Laravel:
myapp/resources/js/components
app/resources/myapp.js
With this syntax:
This is where
laravel mix
we simplify the task, because you can compile both in development and production to reduce the size of the output files with these two commands :asset()
In the end, to be able to access your components, unlike a project made with Vue-CLI, here you only need to invoke the app.js file in the view through the helper , like this:And already in the view you can make use of your component like this:
In the case of the extras that you mention, they are not really; remember that:
fetch
that is also promise-based .npm install
Regarding:
import
andrequire
Require
follow the basic syntax of commonJS which considers these steps:[
Import/Export
] Review the proposed link aboveA perhaps very big difference is that if you include Vue in your project with the traditional syntax of:
The way in which you will work the components is as follows:
The above depends on the Vue instance created and the value of the property
saludo
on the objectdata
While if you work both with option 2 or 3 you will manage through the so-called ones
single file components
that have the following characteristics:<template></template>
.vue
Syntax
References
You can read more about the above here.
Regarding the render property ?
Regarding your last question, you yourself have answered you must learn JavaScript