Noob to Vue and Laravel here, I am building a web app with inertia and Vue on Laravel. I have a frontend and a dashboard. Dashboard has lot of css and js files which should not load on frontend. How can I load them ONLY on dashboard? Sourc..
Category : vuejs2
app.js require(‘./bootstrap’); window.Vue = require(‘vue’); Vue.component(‘exampleComponent1’, require(‘./components/exampleComponent1.vue’)); Vue.component(‘exampleComponent2’, require(‘./components/exampleComponent2.vue’)); const app = new Vue({ el: ‘#app’ }); from the above code, I want to pass data from exampleComponent1 to exampleComponent2 when some event has occurred in exampleComponent1. What is the optimal solution for this ?? Sourc..
require(‘./bootstrap’); window.Vue = require(‘vue’); Vue.component(‘exampleComponent1’, require(‘./components/exampleComponent1.vue’)); Vue.component(‘exampleComponent2’, require(‘./components/exampleComponent2.vue’)); const app = new Vue({ el: ‘#app’ }); from the above code, I want to pass data from exampleComponent1 to exampleComponent2 when some event has occurred in exampleComponent1. What is the optimal solution for this ?? Sourc..
I seem to recall being able to emit an event from a parent component to a child component by specifying the emitted event in the opening <template> tag of the corresponding child component. However for some reason it is no longer working in my implementation. Am I delusional or was this possibly a feature from ..
I seem to recall being able to emit an event from a parent component to a child component by specifying the emitted event in the opening <template> tag of the corresponding child component. However for some reason it is no longer working in my implementation. Am I delusional or was this possibly a feature from ..
My vuexy datepicker returns the following string: Tue Dec 01 2020 21:30:00 GMT+0600 (Bangladesh Standard Time) In my controller (laravel) I want to convert this into simple date format – yyyy-mm-dd. I have tried with strtotime() & date() but nothing works. It may need to use DateTime::createFromFormat() but I could not pick the syntax. How ..
I’m using vue-social auth package for google login Link: https://www.npmjs.com/package/vue-social-auth As i press the login button i’m getting: [Vue warn]: Error in v-on handler: "Error: Request handler instance not found" Here is the way i’m using it: app.js import VueSocialauth from ‘vue-social-auth’ Vue.use(VueSocialauth, { providers: { google: { clientId: ‘XXXXXXXXXX.apps.googleusercontent.com’, redirectUri: ‘auth/google/callback’ // Your client ..
This is for my Laravel + Vue SPA app. I have this Laravel Mix config file here: const path = require(‘path’); const fs = require(‘fs-extra’); const mix = require(‘laravel-mix’); const tailwindcss = require(‘tailwindcss’); require(‘laravel-mix-bundle-analyzer’); function publishAssets() { const publicDir = path.resolve(__dirname, ‘./public’); if (mix.inProduction()) { fs.removeSync(path.join(publicDir, ‘dist’)); } fs.copySync(path.join(publicDir, ‘build’, ‘dist’), path.join(publicDir, ‘dist’)); fs.removeSync(path.join(publicDir, ‘build’)); ..
I set myself a goal early this year of learning Laravel, Vue and Vuetify, none of which I have previously used. This has proven quite difficult since most tutorials and videos for Laravel don’t touch on Vue, most material for Vue don’t touch on how to use Vue in Laravel, and none of the material ..
I am creating a single page application using laravel and vue. it’s not loading index component on page load. Welcome.blade.php <body> <div id="app"> <router-view></router-view> </div> <script src="{{asset(‘js/app.js’)}}"></script> </body> router.js file import Vue from ‘vue’; import VueRouter from ‘vue-router’; Vue.use(VueRouter) const routes = [ { path: ‘/’, component: require(‘./components/IndexComponent.vue’) }, { path: ‘/login’, component: require(‘./components/LoginComponent.vue’) } ..
I’m uploading files with b-form-file in BootstrapVue, setting multiple to true works perfectly for multiple files, BUT each time I choose a file it removes any previously added ones. And the files will often be spread across multiple folders, so I need to be able to pick a file from one folder, choose it, pick ..
I have laravel/VueJs app which is supporting multiple language but there is one issue, when I change language on VueJs html Lang tag will not change. Code <!doctype html> <html lang="{{ str_replace(‘_’, ‘-‘, app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="csrf-token" content="{{ csrf_token() }}" /> <title>{{ config(‘app.name’, ‘Laravel’) }}</title> <link href="{{ ..
I have dynamic fields where I can add/remove inputs and get array of inputs to send to my back-end but it always sends values of my array as [Object Object] Code <div class="col-md-12"> <vs-row> <vs-table> <template #tbody> <vs-tr v-for="(row, index) in form.titles" :key="index"> <vs-th><strong>Title</strong></vs-th> <vs-td> <vs-input ref="titled" v-model="row.title"></vs-input> </vs-td> <vs-td> <vs-button icon color="danger" border type="button" ..
I’m working on a Vue Laravel application for work that is getting pretty large. I tried to implement lazy loading on my components and routes but i m getting no results. On compile my app.js is still the same size and i m not seeing any chunks created :/ in my app.js : [app.js sample][1] ..
I’m learning Vue2 and currently, I have a simple boilerplate using Laravel, Vue2, Laravel Echo, Sanctum, and the Websockets package, all using the Laravel default Echo setup. Everything works nicely there. Now I’m trying to decouple things, so I’ve created the same boilerplate but as a Vue SPA and using Laravel Passport (I have my ..
I am using Laravel Livewire and I need to include a vuejs component in the template. How can I bind vuejs list value in livewire? How to link/synchronize the values. Here are the fields. VueJs : <input name="cities" :value="selected"> Livewire : <input wire:model="cities" name="cities"> I have not something already done. I am looking for a ..
I am developing a project with vue as frontend and laravel 8 api. I am using JWT for authentication. I understand a token has to be generated before a user can login, but is there a way to automatically log in the user after they register? Sourc..
I have this attributes data data(){ return { formData :new Form({ attributes:[], }), I have a attribute id and an attribute value so i want to pass this id and value to url so that i cab loop in my controller attributes array and get id and value : localhost:8000..?attributes[][‘attribute_id_1’]=attributevalue1&attributes[][‘attribute_id_2′]=attributevalue2… I’m redirecting like this : ..
I’m trying to Login using Laravel and Vue.js its controller code is: public function login(Request $request){ $validation = Validator::make($request->all(),[ ‘user_id’ => ‘required|email’, ‘password’ => ‘required|string|min:8|max:15’, ]); if ($validation->fails()) { $response[‘status’] = false; $response[‘message’] = $validation->errors()->first(); return response()->json($response,200); } if(Auth::attempt([’email’ => request(’email’), ‘password’ => request(‘password’)])){ $user = Auth::user(); $token = $user->createToken(‘MyApp’)->accessToken; $user->api_token = $token; $user->save(); return ..
I am using laravel 8 with inertia js. I have created a component that is a modal. It can be called from the parent component without any problem and send the information. The problem is when the modal is hidden, in console it shows: Avoid mutating a prop directly since the value will be overwritten ..
I’m saving image in following path : storageapppublicimguser_image and saving image url like this in database: /img/user_image/285070719.png trying to display image like this: <img :src="’../app/public’+profile.image"> but the image does not display, Any solution to resolve this issue is highly appreciated. Sourc..
I’m using vue js with laravel api . i have defined router for forget password page in url i’m passing token . when i’m passing token then page not loading its coming not found. router.js { path: ‘reset-password/:token’, name: ‘ResetPasswordForm’, component: ResetPasswordForm, } please help me how to fixed out this issue. Sourc..
When directing to ‘/’ the "mainapp im here" message is showing but the routing to homepage is not happening , below is my code , this is my first time using Vue and im trying to work with it, the problem it’s not routing note that it’s accessing the router.js —– web.php // Client Routes ..
Every day, I come to my office, launch my IDE (Code – OSS) and run npm run watch. Every day it works like a charm. But not today. Oddly enough, today running npm run watch fires this error: ERROR in multi vue Module not found: Error: Can’t resolve ‘vue’ in ‘/home/TopSecretUser/Code/Local/TopSecretProject/11.11.2020/dev’ @ multi vue /js/vendor[0] ..
I am using vue 2.6.12 in combination with Laravel. For my use case, I am populating a dropdown with values from a database, using a v-for loop. This is my code: <select class="pagination-select" v-model="selectedDepot"> <option v-for="(depot, index) in depots" :id="depot.DEPOTID" :value="depot.DEPOTNAME" v-text="depot.DEPOTNAME"></option> </select> I have a data property for the v-model selectedDepot: data(){ return{ selectedDepotID: ..