i'm trying to use this lib from AdminLTE in a Vue project. I would like to know if it's possible.
AdminLTE Doc
Screen Cap
I've installed adminlte by npm, and already have jquery too
I have a app.js file with my Vue const App, and my components.
This is my code in my App.js file
import 'admin-lte/plugins/toastr/toastr.min.js'
import 'admin-lte/plugins/toastr/toastr.min.css'
$(document).Toasts('create', {
icon: 'fas fa-exclamation-triangle',
class: 'bg-danger m-1',
autohide: true,
delay: 5000,
title: 'An error has occured',
body: 'Something went wrong'
})
But I get this error message in console
app.js:6776 Uncaught TypeError: $(...).Toasts is not a function
at Module../resources/js/app.js (app.js:6776:13)
at __webpack_require__ (app.js:221424:42)
at app.js:221593:64
at Function.__webpack_require__.O (app.js:221468:24)
at app.js:221595:53
at app.js:221597:12
Honestly I don't have idea how to start, I hope you can help me, thanks
Related
I have been working on a Laravel 8 Inertia and Vue.js project for a couple of weeks without this problem.
My files were residing in C:\Users[my_user]\laravel. I was using the artisan command serve where it was opening 127.0.0.1:8080 as the local development server -- everything was fine.
I decided that it was time to transfer the files to apache's http://localhost/laravel where I would use xampp to open the project instead of Laravel php artisan command serve.
I have inspected my routes, Controllers, passed the Inertia::render() command, reached app.js without any problem. but when I run the createInertiaApp() I get url part being duplicated I guess by Inertia and not vue.js
Here is the code I am having in my app.js
console.log('Still working well without duplicating url')
createInertiaApp({
title: (title) => `${title} - ${appName}`,
resolve: (name) => require(`./Pages/${name}.vue`),
setup({ el, app, props, plugin }) {
return createApp({ render: () => h(app, props) })
.use(plugin)
.component('Link', Link)
.component('Head', Head)
.mixin({ methods: { route } })
.mount(el);
},
});
NB: when I comment the createInertiaApp code, the home url will be perfectly http://localhost/laravel, but when I run the createInertiaApp I get http://localhost/laravel/laravel/
I'm facing the same problem. I'm using Nginx, Laravel Jetstream with Inertia stack and I'm working on a local environment. What I get when I request a url e.g. 192.168.1.204:5500/helpdesk/public/login is 192.168.1.204:5500/helpdesk/public/helpdesk/public/login. Urls appear normal when I use php artisan serve. What I have noticed is that the issue lies on /vendor/inertiajs/inertia-laravel/src/Response.php toResponse() method and in particular in the following piece of code:
$page = [
'component' => $this->component,
'props' => $props,
//'url' => $request->getBaseUrl().$request->getRequestUri(),
'url' => $request->getRequestUri(),
'version' => $this->version,
];
If you replace $request->getBaseUrl().$request->getRequestUri() with $request->getRequestUri() the problem should go away.
But I think there must be a much better/cleaner way to do that. I hope someone else can provide more help on that.
Actually the above code was changed when support to Laravel 9 was added to inertia/laravel: https://github.com/inertiajs/inertia-laravel/pull/347/commits/bf059248ab73bcaccbea057d0a9fa11446fa0e20.
There is also an issue opened for this: https://github.com/inertiajs/inertia-laravel/pull/360.
I'm following along this tutorial to get the vuex store in cypress while running e2e tests.
As I use vue-cli (#vue/cli 4.3.1), with the #vue/cli-plugin-e2e-cypress.
As of this setup, I don't have an app.js, rather a main.js.
But if I put the needed code in the main.js, it does not work:
/**
* Start APP
*/
const app = new Vue({
router,
render: h => h(App),
}).$mount('#app');
if (window.Cypress) {
console.log('Running in Cypress');
// only available during E2E tests
window.app = app;
} else {
console.log('NOT Running in Cypress');
}
If I run it from cypress, I doesn't log anything from main.js to the console.
In cypress, when I try to get the store
cy.window().its('app.$store')
I get the error:
Timed out retrying: cy.its() errored because the property: app does not exist on your subject.
How can I get it running with vue-cli?
I'm trying to use a Vue.js component in Laravel but cannot get props passed from the blade to the js component. Console is reporting [Vue warn]: Error in mounted hook: "ReferenceError: clientId is not defined"
I've tried renaming the prop in the blade/js, using :client-id, client, v-client, etc., and simplified as much as I can but still can't make it work.
Looks almost exactly like a bit of code I've used successfully elsewhere.
show.blade.php
<archive-button client-id="1"></archive-button>
archiveButton.js
<script>
export default {
props: ["clientId"],
mounted() {
console.log("id:" + clientId);
}
};
</script>
I expect the clientId to appear in the console as id:1 but instead, it reports
[Vue warn]: Error in mounted hook: "ReferenceError: clientId is not defined"
found in
---> <ArchiveButton> at resources/js/components/archiveButton.vue
Probably a schoolboy error, but I've been staring at it and scratching my head for ages... Can anyone see the problem?
This has nothing to do with Laravel
Change
mounted() {
console.log("id:" + clientId);
}
to
mounted() {
console.log("id:" + this.clientId);
}
I'm trying to build an app using Tone.js on top of Nuxt.js. Tone.js requires the browser's Web Audio API and as Nuxt renders stuff on the server side my build keeps failing.
Nuxt addresses this in the plugin documentation and I've followed that approach in my nuxt.config.js file writing:
module.exports = {
plugins: [{src: '~node_modules/tone/build/Tone.js', ssr: false }],
}
however that results in this error: [nuxt] Error while initializing app TypeError: Cannot read property 'isUndef' of undefined. Looking at Tone's source I'm pretty sure this is because I'm getting it because the code is still being executed on the server side.
I've seen solutions putting the js file into the static folder and checking process.browser but both result in Tone being undefined.
My question seems to be the same as this one if it's helpful additional context
Instead of import a plugin, in your page.vue you can init Tone.js in the mounted() method, because this function is run only from client-side.
Example of page/test.vue file:
<template>
<div>
Tone.js
</div>
</template>
<script>
export default {
mounted() {
var Tone = require("Tone");
var synth = new Tone.Synth().toMaster();
synth.triggerAttackRelease("C4", "8n");
}
}
</script>
I'm playing with vueJS and trying to grab some data from an ajax request.
Heres my code:
new Vue({
el: '#recipeList',
ready: function () {
this.fetchRecipes();
},
methods: {
fetchRecipes: function () {
this.$http.get('/recipes/ajax', function (recipes) {
this.$set('recipes') = recipes;
});
}
}})
The html code is fine, I doubt you need to see that.
The documentation says that this is how you do a ajax request, however the $http object does not appear to be set.
Here is the console error I am receiving:
TypeError: undefined is not an object (evaluating 'this.$http.get')
fetchRecipesapp.js:10
(anonymous function)vue.js:307
readyapp.js:5
_callHookvue.js:8197
readyvue.js:10169
$mountvue.js:10155
_initvue.js:8054
Vuevue.js:80
global codeapp.js:1
app.js:10
$http.get is for Vue Resource. Make sure you are pulling that in properly. i.e., add vue-resource to your package.json, then npm install, then...
var Vue = require('vue');
Vue.use(require('vue-resource'));
Also, make sure your root path is set up properly.
Vue.http.options.root = '/your-root-path';
Hope it helps! :-)