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.
Related
I have a little problem with vue.js recently and wondering if anyone could help please?
I have a new install of laravel 7.3.3 and vue.js 2.6.12 can not get the vue devtools extension to show me my components, variables etc.
This is what the devtools look like :
Here is the repo : https://github.com/yex777/pa-hub
Thanks for any help!
I had a similar issue with my repo. I don't actually register components globally, I instead make components and just register them on the page they are needed. My issue with this was caused because I was binding Vue to the page twice. Once in app.js and then again in my custom JS file for my component. As such, I think the dev tools was picking up the wrong Vue instance.
I resolved my issue by removing the references to vue in my app.js file and then only binding elements using my new JS file. So my app.js file only contains
require('./bootstrap');
and then I have a separate file which I include on the relevant page which looks a little like this:
import Vue from 'vue';
import Axios from 'axios';
import StudentManagement from './StudentManagement.vue';
window.axios = Axios;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
new Vue({ // eslint-disable-line no-undef, no-new
el: '#student-management',
render: h => h(StudentManagement),
});
I suspect you may have a similar issue where the Vue instance is being setup twice.
The easiest way to check is in the console, it will output a message saying that Vue is in development mode:
As you can see, it's got a 2 next to the message, saying the message has been output twice. If this is the case, you just need to make sure you only include or set up your Vue instance once and the dev tools should pickup your components.
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'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,
I'm trying to add a chart using this Vue library. I added the dependencies into the Config file. The library asks us to use Vue.use(). But I get Vue is undefined. Any ideas?
https://vuejsexamples.com/lightweight-vue-component-for-drawing-pure-css-donut-charts/
Please use the App Level Enhancments
https://vuepress.vuejs.org/guide/basic-config.html#app-level-enhancements
Belowe text is copied from Vuepress documentation:
App Level Enhancements
Since the VuePress app is a standard Vue app, you can apply app-level enhancements by creating a file .vuepress/enhanceApp.js, which will be imported into the app if it is present. The file should export default a hook function which will receive an object containing some app level values. You can use this hook to install additional Vue plugins, register global components, or add additional router hooks:
export default ({
Vue, // the version of Vue being used in the VuePress app
options, // the options for the root Vue instance
router, // the router instance for the app
siteData // site metadata
}) => {
// ...apply enhancements to the app
}
I was watching a tutorial that uses laravel and vue and on the tutorial he add a vue component in the components folder and then register that component in app.js file using this code
Vue.component('articles',require('./components/articles.vue');
And it works fine and in my case when I use this code it says require is not defined.
In the app.js file theres already an example component registered using this code
Vue.component('example-component',__webpack_require__(37));
My question is how does the number 37 define the ExampleComponent.vue file? And how can I get the number of the file i want to include? And I don't have the webpack CLI
Thanks
Its looks like i have been using the wrong app.js file which was in the public directory i should be adding these codes to the app.js which sits in the components directory
You should try
import YourComponent from 'path';
new Vue({
components: {
"your-component": YourComponent
});