Im new in Vue.js, so i watched a tones of tutorials and forums for how to render Vue.js component inside Laravel blade and i didnt find any solutions for that.
In my current app.js i render router-view inside App.vue
But when i want try to put router-view inside welcome.blade.php nothing shows...
import './bootstrap';
import {createApp} from 'vue';
import App from './App.vue';
import axios from 'axios';
import router from './router';
const app = createApp(App);
app.config.globalProperties.$axios = axios;
app.use(router);
app.mount('#app');
and this is my App.vue
<template>
<div class="container">
<NavMenu/>
<router-view></router-view>
</div>
</template>
So what i want is
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}" />
<title>{{ env('APP_NAME') }}</title>
</head>
<body>
<div id="app">
<router-link :to="{ name: 'home' }">
<router-link :to="{ name: 'about' }">
<router-view></router-view>
</div>
#vite('/resources/js/app.js')
</body>
</html>
Already read all posts here on stackoverflow and didnt helps, also Vue or Laravel documentation doesnt have nice explanation.
I would be very grateful if you could help me in further research and my studies.
So VueJS 3 as framework and VueJs 3 used in Laravel Webpack mix are two things differents :
Router is available in VueJS framework
VusJS in Laravel webpack offers you the ability to add custom components like :
in app.js :
const app = createApp({})
app.component('example-component', require('./components/ExampleComponent.vue').default);
and use it in blade <example-component></example-component>
You can create a VueJS fronted Web App and a Laravel project for your backend API so you can benefit from the power of each tool.
Related
im using laravel 9, vitjs and vue3 to create an app.
im new in vue3 and vitjs and i started to create vue components and use them
my codes to register component in app.js:
import { createApp } from "vue"
import testcomponent from './components/testcomponent.vue';
createApp(testcomponent).mount('#app');
ok, I have <div id="app"></div> in my laravel blade file which my component load in it and displays fine.
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
#vite(['resources/sass/app.scss'])
</head>
<body>
<div id="app"></div>
#vite(['resources/js/app.js'])
</body>
But what should I do if I want to pass props to my component?
why we cant use component like as vue2 (tags) like this: <testcomponent></testcomponent>
Is this way because of vue3 or vitejs?
STEP 1: Register Vue app by following way
import { createApp, defineAsyncComponent } from "vue";
const app = createApp({});
//register component globally
const testcomponent= defineAsyncComponent(() => import('./components/testcomponent.vue'));
app.component('test-component', testcomponent);
app.mount('#app');
different ways to import component:
1st Way:
import testcomponent from './components/testcomponent.vue';
2nd Way:
const testcomponent = import("./components/testcomponent.vue")
3rd Way:
const testcomponent = defineAsyncComponent(() => import('./components/testcomponent.vue'))
STEP 2: call a component using tags in blade.
<div id="app">
<test-component :prop-name="{{ json_encode($Obj) }}"></test-component>
</div>
Plz try it.
I am new to Vue JS and I installed vue 3 with laravel and it shows 404 Not Found. I tried a lot but could not find out the issue.
app.blade.php
<div class="min-h-screen bg-gray-100" id="app">
<!-- Page Content -->
<main>
{{ $slot }}
</main>
</div>
app.js
import { createApp } from "vue";
import router from './router'
import CompaniesIndex from './components/companies/CompaniesIndex'
createApp({
components: {
CompaniesIndex
}
}).use(router).mount('#app')
index.js
import { createRouter, createWebHistory } from "vue-router";
import CompaniesIndex from '../components/companies/CompaniesIndex'
const routes = [
{
path: '/welcome',
name: 'companies.index',
component: CompaniesIndex
},
]
export default createRouter({
history: createWebHistory(),
routes
})
ComponiesIndex.vue
<template>
Hello world
</template>
<script>
export default {
}
</script>
web.php
Route::get('/{any}', function () { return view('app'); })->where('any', '. *');
welcome.blade.php
<body class="antialiased">
<h1>Welcome to Laravel Vue 3</h1>
</body>
I'm not sure, but there is maybe an error in your routes/web.php in where statement, because . * regex should match any string and this is .* without whitespace. Please try:
Route::view('/{any}', 'app')->where('any', '.*');
If you are creating SPA your app.blade.php should not contain any markup, it should be blank HTML template with required script with your app:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<script src="{{ mix('assets/js/app.js') }}" defer></script>
<link href="{{ mix('assets/css/app.css') }}" rel="stylesheet">
</head>
<body>
<noscript>
<strong>We're sorry but this app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
</body>
</html>
Then you just mount your Vue app to #app div, which seems to be good in your app.js.
I'm following this simple Crud tutorial for Vue + Laravel and everything in Laravel part seems fine (from creating controllers & models) seems fine but I can't make vue show up in Laravel welcome blade. Here's my code:
app.js file
require('./bootstrap');
window.Vue = require('vue');
import App from './App.vue';
import VueAxios from 'vue-axios';
import VueRouter from 'vue-router';
import axios from 'axios';
import { routes } from './routes';
Vue.use(VueRouter);
Vue.use(VueAxios, axios);
const router = new VueRouter({
mode: 'history',
routes: routes
});
const app = new Vue({
el: '#app',
router: router,
render: h => h(App),
});
App.vue file:
<template>
<div class="container">
<h2>Vue app</h2>
<router-view> </router-view>
</div>
</template>
<script>
export default {}
</script>
and this is the 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>Laravel</title>
<style>
body {
font-family: 'Nunito', sans-serif;
}
</style>
</head>
<body class="antialiased">
<div id="app"> </div>
<script src="{{ mix('js/app.js') }}" type="text/javascript"></script>
<h2>The welcome blade</h2>
</body>
</html>
edit: answer added below, basically followed another tutorial
Looking at the code after composer require laravel/ui and php artisan ui vue I see small change that may affect the execution of code.
Originally the Laravel setup creates window.Vue = require('vue').default;, but your code has window.Vue = require('vue')
Firstly, try this:
<script src="{{ asset('js/app.js') }}" defer></script>
Secondly, you may need a router view element inside the div with id app. I can't say for sure since I don't know your routes. If the change above doesn't solve the problem, add router view like
<div id="app">
<router-view />
</div>
UPDATE
Another thing to try. Remove these lines
import VueAxios from 'vue-axios';
import axios from 'axios';
Vue.use(VueAxios, axios);
because you have axios on bootstrap.js file.
And make sure there is no error message on the console.
So it must have been something wrong with my installation process because I followed another tutorial and now it's working video
the same questions already asked here but answer do not resolve my problem
1. Laravel: vue components not rendering
2. Vue component not showing in laravel
this my home.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>
<style>
</style>
</head>
<body>
<div id="app">
<mainapp></mainapp> #this one show as read
</div>
</body>
<script src="{{mix('/js/app.js')}}"></script>
</html>
this is my app.js
require('./bootstrap');
window.Vue = require('vue')
Vue.component('mainapp',require('./components.vue/mainapp.vue').default)
const app = new Vue({
el: '#app'
})
and this my mainapp.vue
<template>
<div>
<h1>this is the frist components</h1>
</div>
</template>
and
laravel : 8
Vue: 2.6.12
when I run npm run watch and php artisan serve
then I check in 127.0.0.1/8000
I can see this
You are running Vue in development mode. Make sure to turn on
production mode when deploying for production. See more tips at
https://vuejs.org/guide/deployment.html
but it does not render how can I solve this?
I used these vue js files to build my form in Larval.
When I call these files in Larval I get a blank page.
The structure of my files is as follows:
And the contents of app.js file is as follow:
import Vue from "vue"
import App from "./components/App.vue"
import store from "./components/store"
import VeeValidate from "vee-validate"
Vue.use(VeeValidate);
import "./components/directives"
Vue.config.productionTip = false;
new Vue({
store,
render: h => h(App)
}).$mount("#app");
Of course, I get the below warning when I run nmp run watch's command.
WARNING in ./resources/js/app.js 5:8-19 "export 'default' (imported as
'VeeValidate') was not found in 'vee-validate' # multi
./resources/js/app.js ./resources/sass/app.scss
My question is: How to import external vue js files to laravel project?
First thing you need to include app.js to your blade file like this
<script src="{{asset('js/app.js')}}"></script>
after that if you want to use vue js components in you blade app you need to define them in your app.js like this:
Vue.component('home', require('path to your component').default);
and in your blade under div #idd add your tag <home></home>
use src="{{ mix('js/app.js') }}"
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" value="{{ csrf_token() }}" />
<title>VueJS CRUD Operations in Laravel</title>
<link href="{{ mix('css/app.css') }}" type="text/css" rel="stylesheet" />
</head>
<body>
<div id="app">
</div>
<script src="{{ mix('js/app.js') }}" type="text/javascript"></script>
</body>
</html>