I'm learning Vue.js and I don't understand what does the $ symbols does. Im using Laravel, I mean I'm not using the Vue-CLI.
When I go to the Vue documentation, a lot of the documents does not have the $.
For example the Programmatic Navigation section says: router.push({ path: '/posts' }), but when I did it on my code I had to do this.$router.push({ path: '/posts' });
Thanks in advance.
In Vue, $ means that you're using a Vue instance property or an Vue instance method.
You can learn more about it on the documentation.
$ to differentiate vue Instance properties from user-defined properties.
The $ symbol is used in Vue as a prefix for property names on the Vue instance. This helps to avoid Vue instance properties injected into the Vue prototype by developers from overriding present properties. In essence, it differentiates Vue instance properties from the ones you or other library developers might inject into the Vue instance.
For example. To access the data that the Vue instance is observing you could use: vm.$data. Assuming you assigned your Vue instance to a variable called vm.
An alternative to above, if you are in an SFC(Single File Components), you can access these instances with the this keyword. Like so:
<script>
export default {
name: 'mySFCComponentName',
data() {
return {
myData: [1, 2, 3]
}
},
mounted() {
console.log(this.$data)
}
}
</script>
From the above snippet, you can see I am using the $data property on the instance via the this keyword to access the data that the Vue instance is watching.
I hope this helps. Thanks,
Related
I am messing around locally with a laravel and vue project, I also have vue-router setup but my URL look like this: <virtual-host>.loc/#/.
Whenever I access my v-host it loads but I get this weird #/ thing appended to the end of the URL. Does anybody know where it comes from? Is it a JS thing?
by default vue js use hash mode. that's why you see that type of url. to change this behavior you need to set mode property to history like this,
const router = new VueRouter({
mode: 'history',
routes: [...]
})
I use <router-view> to inject components based on the route. I want to make vue-assertions in Laravel Dusk now.
<router-view :key="$route.fullPath" :dusk="$route.name"></router-view>
But when I do ->assertVue('field', 'value', '#indexOrder') on my order index route, I get this error:
Facebook\WebDriver\Exception\UnexpectedJavascriptException: javascript error: Cannot read property '__vue__' of null
Of course, I made sure that the route's name is indexOrder and is correctly put in the dusk-attribute of the router-view component. How can I fix that?
While this is not exactly an answer, it can help move you in the right direction.
When you run the following command in your browser console on the route you're testing, you'll see a $children variable.
document.querySelector('body [dusk="YOUR_ROUTE_NAME"]').__vue__;
The above command is what Dusk executes in its MakesAssertions trait under the vueAttribute method. This $children variable holds all of your components loaded by the router, so you'll have to create some new methods and assertions to support vue-router in Dusk.
I am starting a new project, Nuxt.js for the frontend and Laravel for the backend.
How can I connect the two?
I have installed a new Nuxt project using create-nuxt-app, and a new laravel project.
As far as I have searched, I figured I need some kind of environment variables.
In my nuxt project, I have added the dotenv package and placed a new .env file in the root of the nuxt project.
And added CORS to my laravel project, as I have been getting an error.
The variables inside are indeed accessible from the project, and im using them
like this:
APP_NAME=TestProjectName
API_URL=http://127.0.0.1:8000
And accessing it like this:
process.env.APP_NAME etc'
To make HTTP calls, I am using the official Axios module of nuxt.js, and to test it i used it in one of the components that came by default.
The backend:
Route::get('/', function () {
return "Hello from Laravel API";
});
and from inside the component:
console.log(process.env.API_URL)//Gives 127.0.0.1:8000
//But this gives undefined
this.$axios.$get(process.env.API_URL).then((response) => {
console.log(response);
});
}
What am I doing wrong here?
I have tried to describe my setup and problem as best as I can. If I overlooked something, please tell me and I will update my question. Thanks.
Taking for granted that visiting https://127.0.0.1:8000/ in your browser you get the expected response, lets see what might be wrong in the front end:
First you should make sure that axios module is initialized correctly. Your nuxt.config.js file should include the following
//inclusion of module
modules: [
'#nuxtjs/axios',
<other modules>,
],
//configuration of module
axios: {
baseURL: process.env.API_URL,
},
Keep in mind that depending on the component's lifecycle, your axios request may be occurring in the client side (after server side rendering), where the address 127.0.0.1 might be invalid. I would suggest that you avoid using 127.0.0.1 or localhost when defining api_uris, and prefer using your local network ip for local testing.
After configuring the axios module as above, you can make requests in your components using just relative api uris:
this.$axios.$get('/').then(response => {
console.log(response)
}).catch(err => {
console.error(err)
})
While testing if this works it is very helpful to open your browser's dev tools > network tab and check the state of the request. If you still don't get the response, the odds are that you'll have more info either from the catch section, or the request status from the dev tools.
Keep us updated!
Nuxt has a routing file stucture to make it easy to set up server side rendering but also to help with maintainability too. This can cause Laravel and Nuxt to fight over the routing, you will need to configure this to get it working correctly.
I'd suggest you use Laravel-Nuxt as a lot of these small problems are solved for you.
https://github.com/cretueusebiu/laravel-nuxt
I'm having trouble understanding how to use the Framework modules in nativescript-vue.
For example this module, is what I am trying to understand how to use:
https://docs.nativescript.org/ns-framework-modules/platform
Do I need to declare in App.js / Main.js or in the component I'm going to use?
I come from Web Development with Vue.js, I think an implementation example I'm trying to follow would look like this:
It is an example of the web that I am thinking of being the same as the way of implementation in the mobile.
On the web if I needed to use Axios I would import it into App.js / Main.js to stay global in the application or SPF to stay local and be able to call in the desired components.
In mobile if I use pure nativescript the import is clear, but in nativescript-vue I can not understand how to use it, I do not know if it already comes configured by default or not.
Import modules where you need them in your code, both app.js and SPF.
app.js
import axios from "axios";
var platform = require("tns-core-modules/platform");
var instance = axios.create({ baseURL: "https://myendpoint.com" });
if (platform.isAndroid) { /* ... */ }
File.vue
import axios from "axios";
var platform = require("tns-core-modules/platform");
export default {
methods: {
androidFunc() {
if (platform.isIOS) {
axios.get("https://website.com/api/ios") // ...
}
}
}
}
If I need something globally, I usually use Vue instance properties (Vue.prototype.$myProperty) or Vuex store.
You should be able to use all the CommonJS Vue modules you used in Web, meaning it should not have any dependency over browser specific features.
You might still able to use Axios as it internally uses nothing but XMLHttpRequest, thats a valid global object in NativeScript environment.
If you have Vue module that depends on HTML Dom / document / window / local or session storage etc., then it might fail. FYI, there are plugins like nativescript-localstorage which simulates features like local / session storage.
I am using Vue.js (within the Laravel framework) and I'm new to both. I'm trying to understand some basic ideas about some code I"m trying to use:
App.js:
import Vue from 'vue';
import Toasted from 'vue-toasted';
Vue.component('toast-alert', require('./components/ToastAlert.vue'));
Vue.use(Toasted);
ToastAlert.vue:
<template>
</template>
<script>
export default {
props: {
},
mounted() {
this.showToast()
},
data() {
return {
message: 'Status Update',
}
},
methods: {
showToast() {
this.$toasted.show(this.message, {
duration: 3000
});
}
}
}
</script>
Questions:
I understand the import tells the script that we ant to pull in certain node modules but I don't totally understand what use() is for. I have read documentation to see thats what you do with plugins (https://v2.vuejs.org/v2/guide/plugins.html), but not really understanding more than that.
Again from the documentation, I see that when registering a Vue component, the second parameter is a list of options, ie: template, props, methods etc. I'm a bit confused about what require does and how it translates the vue file (which is a composed of tags and a tag exporting an object) into a final object which meets the standards of Vue.component.
1) In Vue, calling Vue.use( Plugin, Options ) makes the plugin available throughout the application. It's basically a way to bootstrap a plugin i.e. Vue-Toasted, so you can use it throughout your application. You can define configuration options as well here.
2) Vue.component is used to register (your own) components in the application. It allows them to be used within each other component, without having to define them in each file. Think of the app.js file as the bootstrap file, it defines all of the plugins, components, etc. and registers them for use in Vue. require is importing the file and Vue is parsing the template and object. Note this is all compiled in webpack and cannot load in a browser as-is.