Category : vue-component

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

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

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

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

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

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

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

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 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

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