I have removed public from my Laravel project url. But now my Vue.js is not working.
If I remove public from src file it's not recognizing that project has Vue.js, but if I add public it's recognizing that this project has Vue.js. But it's not showing that component on my Blade page, instead of it it's giving me this error:
[Vue warn]: Unknown custom element: <app-some> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
My Blade file:
<div id="app">
<app-some> </app-some>
</div>
<script src="{{asset('public/js/app.js')}}"></script>
app.js file:
Vue.component('appSome', require('./components/some.vue').default);
"[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option."
It occurs when components are not registered within the "app.js" file. In the Vue instance, try adding this
new Vue({
components: {
appSome: some
}
});
Of course you also have to import the component.
Related
I have blade file named index-game.blade.php. And in one line of it, a line that reaches a js file under laravel public folder.
<script type="text/javascript" src="{{asset('game/')}}/js/CPreloader.js"></script>
So far so good.
Also inside CPreloader.js, I have lines like this.
s_oSpriteLibrary.addSprite("bg_menu","./sprites/bg_menu.jpg");
s_oSpriteLibrary.addSprite("progress_bar","./sprites/progress_bar.png");
At this stage, I get the following error in the console of my browser's devtools screen:
bg_menu.jpg:1 GET http://127.0.0.1:8000/games/sprites/bg_menu.jpg 404 (Not Found)
progress_bar.png:1 GET http://127.0.0.1:8000/games/sprites/progress_bar.png 404 (Not Found)
This is the link where I called "index-game.blade.php" => http://127.0.0.1:8000/games/slot1 (Let's pay attention to the games word here)
It works if i change my javascript file to
s_oSpriteLibrary.addSprite("bg_menu","../game/sprites/bg_menu.jpg");
s_oSpriteLibrary.addSprite("progress_bar","../game/sprites/progress_bar.png");
Because the correct link is this instead
http://127.0.0.1:8000/games/sprites/bg_menu.jpg // wrong
http://127.0.0.1:8000/game/sprites/bg_menu.jpg // true
I don't want to change the paths in all my javascript files. Because this is a game and there are as many pictures as possible. How do I correctly identify the laravel public folder in my external js files.
There is a package for that: https://github.com/tighten/ziggy
Some copy/paste from docs:
Install Ziggy into your Laravel app with
composer require tightenco/ziggy
Generate javascript route file:
php artisan ziggy:generate
Import in js file and use:
// app.js
import route from 'ziggy';
import { Ziggy } from './ziggy';
// ...
route('home', undefined, undefined, Ziggy);
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 have a big project in Laravel, which have several front-ends, depending on logged user.
I also have a shared directory, where common components (like table, modal, etc.) can be used by the different front-end.
I want to compile each front-end to a different js file, so I can include only the relevant file for each user.
What I have till now:
webpack.mix.js:
mix.js('resources/js/app.js', 'public/js')
.js('resources/js/frontendUser.js', 'public/js')
.js('resources/js/frontendAdmin.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
Under resources/js I have a separate file for each front-end, for example frontendAdmin.js:
require('./bootstrap');
window.Vue = require('vue');
Vue.component(
'frontend-admin-component',
require('./components/FrontendAdminComponent.vue').default
);
const app = new Vue({
el: '#app',
});
When I run npm run dev fiels are compiled correctly, and I can include them from the blade file:
<script src="{{ asset('js/frontendAdmin.js') }}" defer></script>
However, I get in console this error:
[Vue warn]: Unknown custom element: <frontend-admin-component>
- did you register the component correctly? For recursive components,
make sure to provide the "name" option.
Looks like the component behaves well, however I assume the warning exists for some reason and would like to fix it.
Is what I try to do have sense? What is wrong?
This warning generally occurs if you do not specify any name your component
For example, if you have a component called User.vue then your component should be as follows:
<template>
</template>
<script>
export default {
name: 'User'
}
</script>
<style>
</style>
This name option is not mandatory but it is convention to use a name for each component for all components.
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
});
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.