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.
Related
for a real time project i use laravel 8 and axios javascript library used to make HTTP requests.
the backend work great .
for example if go to this URL http://127.0.0.1:8000/api/usersthe following data will be show
[{"id":1,"name":"Hossein Khosromanesh","email":"test#gmail.com","email_verified_at":null,"created_at":"2022-01-22T19:52:12.000000Z","updated_at":"2022-01-22T19:52:12.000000Z"}]
the problem comes when i want to show the data to the frontend , we got error Uncaught TypeError: Cannot read properties of undefined (reading 'get') at users:84:18
actually get('/api/users') from window.axios.get('/api/users') is the main problem
the front end code :
<script>
window.axios.get('/api/users')
.then((response) => {
const usersElement = document.getElementById('users')
let users = response.data
users.ForEach((user,index) => {
let element = document.createElement('li')
element.setAttribute('id' , user.id)
element.innerText = user.name
usersElement.appendChild(element)
})
})
</script>
what's wrong was my code ? can somebody please help me and free me from darkness : )
If you are importing axios using a script tag in your html or blade file, you can use it with axios.get instead of window.axios.get.
As per My understanding from your code. You have to import axios in vue component or view where you consume API like below.
import axios from "axios";
Then You can use it like
axios.get('/api/users').then();
Note:- No need to register axios inside windows object in app.js for more information please refer below link
https://axios-http.com/docs/intro
If above method still not work for you then follow below step
Take backup of your code first then perform below step
Check your package.json file and verify axios is present over there or not.
If you don't find then install it using npm command
If you find then delete your package.lock.json file and run npm install command
Then follow import step mentioned above and try.
I have a Laravel project using Laravel Mix, Vue.js and Sass.
The following is the content of the webpack.mix.js file in the project:
const mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js')
.extract(['vue'])
.sass('resources/sass/vendor.scss', 'public/css/')
.sass('resources/sass/app.scss', 'public/css/');
This Mix file is properly compiling all the CSS and JS assets for me when I import all of my Vue components into a master Vue component called App as follows:
// Layout
import SiteFooter from './layout/SiteFooter';
import SiteHeader from './layout/SiteHeader';
// Pages
import Home from './pages/Home';
// And many more here...
export default {
components: {
SiteFooter,
SiteHeader,
// Pages
Home,
// etc...
}
However, as I started to create a lot of components. app.js started to get too big, so then I switched to loading the components in App asynchronously as follows:
// Layout
import SiteFooter from './layout/SiteFooter';
import SiteHeader from './layout/SiteHeader';
export default {
components: {
SiteFooter,
SiteHeader,
// Pages
Home: () => import('./pages/Home'),
// And many more here...
This perfectly achieved the goal of reducing the size of app.js and breaking the components up into separate files, which is great, but as soon as I did this, the Sass stopped compiling into app.css and vendor.css files, and I had no styles on the site.
I played around for a bit and realized that if I removed the extract(['vue']) line from webpack.mix.js, then the Sass would correctly compile again and the styles would display correctly, but then app.js would increase in size by about 330k because of the inclusion of the Vue code.
What I'm wondering is: Why does having the extract(['vue']) method call in the Mix file along with using asynchronous components in Vue cause the Sass to not be compiled, and more importantly, is there a way to pull the Vue code out into a separate vendor.js file as well as get the Sass to properly compile when Vue components are asynchronously loaded? Thank you.
my vue components are working fine, but when i want it with vue router it unable to find the component
The problem is with this code
{path:'home,component:MyHome}
So the reason for the error is, there is no MyHome variable holding any component right. You just register your component with Vue.Component which directly register your component.
Solution
So now for solving this, As Johhn said, Import your component and store it in variable and then pass that variable to your route like below.
import MyHome from "./components/MyHome.vue"
{path:'home,component:MyHome}
Try it with like below.
component: Vue.component("Home", require("./Myhome").default)
You don't need to import it with this way.
Hope it helps.
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 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
});