I have the following problem which repeats a lot to me when using Vue 3 and Laravel somewhere. I'm just getting started and have a virtually clean app and can still see this issue exist. Namely, Vuejs 3 from Laravel 8 do not work for me.
I get an error in the console:
[Vue warn]: Failed to resolve component: app
at app.js:13797
app.js
require('./bootstrap');
import { createApp } from 'vue';
import App from './App.vue';
const app = createApp({App});
app.mount("#app");
App.vue
<template>
<h1>{{ greeting }}</h1>
</template>
<script>
export default {
setup: () => ({
greeting: 'Hello World from Vue 3!'
})
}
</script>
<style scoped>
</style>
webpack.mix.js
const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');
mix.js('resources/js/app.js', 'public/js')
.vue()
.sass('resources/sass/app.scss', 'public/css', {}, [tailwindcss('./tailwind.config.js')])
.version();
welcome.blade.php
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<title>Document</title>
</head>
<body>
<div id="app">
<app>
</app>
</div>
<script src="{{ url('js/app.js') }}"></script>
</body>
</html>
Please help me with this.
:)
It should be createApp(App), not {App}, which is a shorthand for {App: App}.
Related
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 have just done a fresh install of inertia on an app with vuejs (v2) and am getting this error:
[Vue warn]: Do not mount Vue to <html> or <body> - mount to normal elements instead.
But I don't see why it's trying to mount on those elements? As far as I can tell I've followed the inertia installation guide....
web.php
Route::get('test', function(){return \Inertia\Inertia::render('master');});
app-ihf.js
import { App, plugin } from '#inertiajs/inertia-vue'
import Vue from 'vue'
import { InertiaProgress } from '#inertiajs/progress'
Vue.use(plugin)
const el = document.getElementById('app')
new Vue({
render: h => h(App, {
props: {
initialPage: JSON.parse(el.dataset.page),
resolveComponent: name => require(`./Pages/${name}`).default,
},
}),
}).$mount(el)
InertiaProgress.init()
master.blade.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/app-ihf.css">
<script src="{{ mix('/js/app-ihf.js') }}"></script>
</head>
<body>
#inertia
</body>
</html>
Can anyone see what's going wrong here? This is the html when you visit that route
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/app-ihf.css?id=fc17ae1fae0b57440a59">
<script src="/js/app-ihf.js?id=fa7eba2a2c660c498a3e"></script>
</head>
<body>
<div id="app" data-page="{"component":"master","props":{"errors":{}},"url":"\/test","version":"3993c0d73e25e92aa0e15607a6c438ef"}"></div>
</body></html>
I had the exact same issue and it's because I didn't put defer into the script tag so the JavaScript in app.js was running before the id="app" element existed on the page.
So in your case you need:
<script src="{{ mix('/js/app-ihf.js') }}" defer></script>
I have a project using Laravel 8, inertia js, Vue.js and webpack.
The VueJs chrome dev tools aren't working for this project. It keeps showing as not detected, i've tried restarting it, removing and readding the dev tools. I've checked in both dev and production, no vuejs detected. Any help would be great.
App.js
require("./bootstrap");
// Import modules...
import { createApp, h } from "vue";
import {
App as InertiaApp,
plugin as InertiaPlugin,
} from "#inertiajs/inertia-vue3";
const el = document.getElementById("app");
createApp({
render: () =>
h(InertiaApp, {
initialPage: JSON.parse(el.dataset.page),
resolveComponent: (name) => require(`./Pages/${name}`).default,
}),
})
.mixin({ methods: { route } })
.use(InertiaPlugin)
.mount(el);
wepack.mix.js
const mix = require("laravel-mix");
mix.js("resources/js/app.js", "public/js")
.vue()
.postCss("resources/css/app.css", "public/css", [
require("postcss-import"),
require("tailwindcss"),
require("autoprefixer"),
])
.webpackConfig(require("./webpack.config"));
if (mix.inProduction()) {
mix.version();
} else {
mix.sourceMaps(false, "source-map");
}
app.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">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght#400;600;700&display=swap">
<!-- Styles -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<!-- Scripts -->
#routes
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body class="font-sans antialiased">
#inertia
</body>
</html>
i had the same problem in chrome and opera gx, the solution for me was:
Install Vue.js devtools beta;
Close and Reopen your Browser.
In case anyone has the same issue, the chrome extenstion also needs the vuejs devtools dev version to work. But this encountered another issue. Vue not appearing in the dev/inspect tool. Removing a chrome theme and setting this to default brought this back.
I'm trying to setup Inertia to use in my Laravel project but it gives me errors? Where is my mistake?
I installed Inertia with this command
composer require inertiajs/inertia-laravel
followed the instructions on the github page and added #inertia to my app.blade.php like this:
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
<link rel="icon" type="image/jpg" href="{{asset("/image/logo2.png")}}">
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body>
#inertia
</body>
</html>
in my Login Controller
public function showLoginForm()
{
return Inertia::render('Auth/Login');
}
in my routes/web.php
Auth::routes();
Route::get('login', 'Auth\LoginController#showLoginForm')->name('login');
Route::post('login', 'Auth\LoginController#login');
This is the error I get:
the lines that is highlighted is the #inertia which show up as this
<div id="app" data-page="<?php echo e(json_encode($page)); ?>"></div>
What am i doing wrong?
#inertia blade directive is working but not rendered because you need to install the frontend adapter
npm install #inertiajs/inertia #inertiajs/inertia-vue
Set it up in webpack.mix.js
const mix = require('laravel-mix')
const path = require('path')
mix.js('resources/js/app.js', 'public/js')
.webpackConfig({
output: { chunkFilename: 'js/[name].js?id=[chunkhash]' },
resolve: {
alias: {
vue$: 'vue/dist/vue.runtime.esm.js',
'#': path.resolve('resources/js'),
},
},
})
And initialize it in Vue resources/js/app.js
import { InertiaApp } from '#inertiajs/inertia-vue'
import Vue from 'vue'
Vue.use(InertiaApp)
const app = document.getElementById('app')
const pages = {
'Auth/Login': require('./Pages/Auth/Login.vue').default,
}
new Vue({
render: h => h(InertiaApp, {
props: {
initialPage: JSON.parse(app.dataset.page),
resolveComponent: name => pages[name],
},
}),
}).$mount(app)
Currently i am using vue and laravel together.Vue for frontend and laravel for backend api.I am trying to use vue-router with laravel but couldnt make it work.
What i am trying to do is reach http://localhost/ec/public/#/login
app.js:
require('./bootstrap');
window.Vue = require('vue');
import Router from './routes.js'
Vue.component('example-component', require('./components/ExampleComponent.vue'));
Vue.component('login', require('./components/Login.vue'));
Vue.component('register', require('./components/Register.vue'));
const app = new Vue({
el: '#app',
router:Router
});
I have created a file in same dir app.js called routes.js:
import VueRouter from 'vue-router'
import Vue from 'vue'
import Login from './components/Login.vue'
Vue.use(VueRouter);
const router = new VueRouter({
routes:[
{
path:"/login",
component:Login
}
]
})
export default router
welcome.blade.php:
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title> site</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Raleway:100,600" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app">
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>
If i ad to welcome.blade.php i get component not registered error
You need to call <router-view></router-view> within your welcome.blade.php
Update
I could say that the order of the import, try to import Vue 1st then import vue-router. Otherwise you can't skip the <router-view></router-view> because it is an element of vue-router itself.