Category : vue-component

The vue <router-link> don’t want to work as a link, it shows as a simple text. What I’m doing wrong?

     laravel, single-page-application, vue-component, vue-router, vue.js

I’m using vue js in laravel project. I want to make my project single page application, so I need vue routes. I installed the latest versions of vue-loader, vue-template-compiler, vue, vue-router, but the problem still exists. app.js import bootstrap from ‘bootstrap’; import {createApp} from "vue"; import { createRouter, createWebHistory } from ‘vue-router’ import Login from ..

Read more

Vue2 / vue-router / Laravel – router-view not showing a Vue Component

     laravel, vue-component, vue-router, vue.js, vuejs2

I’m running into a problem where my Vue component isn’t showing via router-view, there are no Vue warnings or errors in the console. Here’s my code: welcome.blade.php <!DOCTYPE html> <html lang="{{ str_replace(‘_’, ‘-‘, app()->getLocale()) }}"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Full Stack Blog</title> </head> <body class="antialiased"> <div id="app"> <mainapp></mainapp> </div> <script src="{{mix(‘/js/app.js’)}}"></script> </body> ..

Read more

How to get a vue array inside a php function?

     laravel, vue-component, vue.js

I have multiple checkbox input fields in vue and want some of them to be checked based on data in a vue array. @foreach($question->Answers as $key => $answer) <div class="form-check form-check-inline"> <input type="checkbox" :checked="{{ array_search($answer->text, {VUE_ARRAY}) }}"> </div> @endforeach The problem is that I don’t know how to put my vue array inside the array_search ..

Read more

Is it possible to pass v-for props to a component slotted in the html? Slot props aren’t working

     laravel, vue-component, vue.js

I would like to pass the "instance" property of the v-for loop to the slot, and use it in a component added to that slot in the html. List Component <template> <two-col-row-display :field="field" :fieldcss="fieldcss" :valuecss="valuecss" > <component :is="listType" > <li v-for="instance, i in map_instances(instances)" :key="map_id(instance)"> <slot name="default" :instance="instance">{{ map_display(instance) }}</slot> </li> </component> </two-col-row-display> </template> Slotted ..

Read more

Not Render Component | Vue 3

     laravel, vue-component, vue-router

I have the following file structure: OmdbSearch.vue: <template> Hellooooo </template> index.js: import { createRouter, createWebHistory } from "vue-router"; import OmdbSearch from ‘../components/omdb/OmdbSearch.vue’ const routes = [ { path: ‘/’, name: ‘omdb.search’, component: OmdbSearch } ] export default createRouter({ history: createWebHistory(), routes }) app.js: require(‘./bootstrap’); require(‘alpinejs’); import { createApp } from "vue"; import router from ‘./router’ ..

Read more

Module not found: Error: Can’t resolve ‘./router’| Vue router

     laravel, vue-component, vue-router, vue.js

in search.js from this file: import {createRouter, createWebHistory} from "vue-router"; import SearchIndex from ‘./components/omdb/SearchIndex.vue’ const routes = [ { path: ‘/’, name: ‘welcome’, component: SearchIndex }, ] export default createRouter({ history: createWebHistory(), routes }) in app.js from this file: require(‘./bootstrap’); require(‘alpinejs’); import { createApp } from "vue"; import router from ‘./router’ import SearchIndex from ‘./components/omdb/SearchIndex’ ..

Read more

Pass data from Blade template to Vue component

     laravel, laravel-blade, vue-component, vue.js, vuejs2

This is a new-comer question. I have a Blade template: <div id="app"> <example-component :componentMessage="appMessage" ></example-component> </div> <script> var app = new Vue({ el: "#app", data: function() { return { appMessage: {{$message}} } } }) </script And a Vue component ExampleComponent.vue <template> <p>{{componentMessage}}</p> </template> <script> export default { props: [‘componentMessage’], } </script> So the data flow ..

Read more

Getting the following error "You may need an appropriate loader to handle this file type, e." after running the "npm run watch"

     laravel, laravel-8, vue-component, vue-router, vue.js

Geek’s Need little help, any suggestion or hint will be highly appreciated. The thing is I’m trying to install Vue on Laravel. But after installing the Vue router I decided to compile everything using "npm run watch" but I’m getting the following error on the console: Note* Before running the "npm run watch" command the ..

Read more

‘laravel8 + vue3 Cannot read properties of undefined (reading ‘component’)’

     laravel, laravel-8, vue-component, vue.js, vuejs2

‘laravel8 + vue3 error Uncaught TypeError: Cannot read properties of undefined (reading ‘component’) how can this error be avoided ? app.js window.Vue = require(‘vue’).default; Vue.component(‘hello’, require(‘./hello.vue’).default); const app = new Vue({ el: ‘#app’ }); welcome.blade.php <body class="antialiased"> <div class="relative flex items-top justify-center min-h-screen bg-gray-100 dark:bg-gray-900 sm:items-center py-4 sm:pt-0"> <div id="app"> <hello></hello> </div> </div> <script src="{{mix(‘js/app.js’)}}"></script> ..

Read more

Display a Div/Flash message on link click in VueJS

     javascript, laravel, vue-component, vue.js

In my laravel/Vue application, I have the following component to copy a text to clipboard on link click <a @click="copyURL" ref="mylink"> <img class="social_icon" src="/images/game/copy.png" /></a> <input type="text" class="copyurl_txt" value="https://sample.site/" ref="text"></input> And I have following in the script <script> export default { methods: { copyURL() { this.$refs.text.select(); document.execCommand(‘copy’); alert(‘link copied’); } }, }; </script> Now I ..

Read more