In my laravel 5.6/vue.js 2.5.7 / vuetify": "^1.0.8" I need to set vue component when root of site is opened
I mean when I run url
http://local-artists-rating.com
see url reopened
http://local-artists-rating.com/#/
It has navbar, footer defined in my pages, but not any content I defined in resources/assets/js/components/appRoot.vue.
In my resources/assets/js/app.js:
require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'
import VueRouter from 'vue-router';
window.Vue.use(VueRouter);
...
import AppRoot from './components/appRoot.vue';
...
const routes = [
{
path: '/',
components: {
...
appRoot: AppRoot,
...
}
...
{path: '/not-found/:invalid_url?', component: NotFound, name: 'notFound'},
{path: '/login', component: AppLogin, name: 'appLogin'},
{path: '/', component: AppRoot, name: 'appRoot'},
}
...
const router = new VueRouter( {
mode: 'hash', // default
routes
})
router.beforeEach((to, from, next) => {
if (!to.matched.length) {
next( '/not-found/'+encodeURIComponent(to.path) );
} else {
next();
}
})
...
new Vue({ router, i18n,
data:{
app_title: '',
},
mixins : [appMixin],
created() {
}, // created() {
mounted() {
}, // mounted(){
} ).$mount('#app') // new Vue({ router,
If I commented line :
path: '/',
at top of routes definitions, I got error in console:
app.js?dt=1529909735:73635 Uncaught Error: [vue-router] "path" is required in a route configuration.
at assert (app.js?dt=1529909735:73635)
at addRouteRecord (app.js?dt=1529909735:74771)
at app.js?dt=1529909735:74741
at Array.forEach (<anonymous>)
at createRouteMap (app.js?dt=1529909735:74740)
at createMatcher (app.js?dt=1529909735:74961)
at new VueRouter (app.js?dt=1529909735:76055)
at Object._typeof (app.js?dt=1529909735:4945)
at __webpack_require__ (app.js?dt=1529909735:20)
at Object.<anonymous> (app.js?dt=1529909735:50854)
In my resources/views/layouts/app.blade.php:
<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
<?php $current_template= 'artists_rating_light' ?>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Cache-Control" content="no-cache">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title id="app_title">{{ config('app.name', 'Laravel') }}</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css">
<link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet">
</head>
<body>
<div id="app">
<backend-app-layout></backend-app-layout>
</div>
#include('layouts.footer')
<script src="{{ asset('js/app.js' ) }}{{ "?dt=".time() }}"></script>
</body>
</html>
Which is the right way ?
Thanks!
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 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 not sure why I am getting this error:
Uncaught TypeError: Cannot redefine property: $inertia
at Function.defineProperty (<anonymous>)
at Object.install (app.js:108)
at Function.Vue.use (app.js:233295)
at Module../resources/js/app.js (app.js:246829)
at __webpack_require__ (app.js:20)
at Object.0 (app.js:253385)
at __webpack_require__ (app.js:20)
at app.js:84
at app.js:87
and this warning:
Registering the Inertia Vue plugin via the "app" component has been deprecated. Use the new "plugin" named export instead.
import { plugin } from '#inertiajs/inertia-vue'
Vue.use(plugin)
I followed the docs as closely as I could. I'm using Vue2 and Laravel 8. I can't find anyone with the same issues anywhere. The error claims that 'App' is no longer used, but the docs for Vue2 use it in their example. I'm confused, what am I missing?
Here is my code:
resources/js/app.js:
import { App, plugin } from '#inertiajs/inertia-vue'
import Vue from 'vue'
Vue.use(App)
Vue.use(plugin)
InertiaProgress.init()
Vue.component('drafts', require('./pages/Drafts').default)
const el = document.getElementById('app')
new Vue({
render: (h) =>
h(App, {
props: {
initialPage: JSON.parse(el.dataset.page),
resolveComponent: (name) =>
import(`./pages/${name}`).then((module) => module.default),
},
}),
}).$mount(el)
resources/views/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">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'AppealMaker') }}</title>
<!-- Styles -->
<link href="{{ mix('css/app.css') }}" rel="stylesheet">
<script src="{{ mix('js/app.js') }}"></script>
</head>
<body>
#inertia
</body>
</html>
web.php:
Route::inertia('/drafts', 'drafts');
I had the same problem.
Here is how your app.js file must look like:
https://inertiajs.com/client-side-setup
summarizing:
Remove: Vue.use(App)
Change: import(./pages/${name}).then((module) => module.default),
by require(./Pages/${name}).default,
I have a JS script declared on my laravel view, below the app.js containing all the vuejs components.
In this script I have elements like charts or a script allowing me to change the monthly price to annual.
And when I switch component, the js doesn't load, while when I refresh the page, it works.
There's probably an option I don't know, which would avoid that?
Thank you in advance.
<!doctype html>
<html lang="en">
<head>
<title>Skrap-it</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<link rel="icon" href="/img/favicons/favicon.ico"/>
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<link rel="stylesheet" href="{{ mix('css/icons.css') }}">
</head>
<body>
<div id="app">
<router-view></router-view>
</div>
<script src="{{ mix('js/app.js') }}"></script>
<script src="{{ mix('js/dashboard/scripts.js') }}"></script>
</body>
</html>
My router js file
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import Register from '../components/auth/Register'
import Login from '../components/auth/Login'
import Profile from '../components/dashboard/Profile'
import Apis from '../components/dashboard/Apis'
import Packages from '../components/dashboard/Packages'
import Support from '../components/dashboard/Support'
import Admin from '../components/dashboard/Admin'
import Dashboard from '../components/dashboard/Dashboard'
const routes = [
{ path: '/dashboard', component: Dashboard },
{ path: '/login', component: Login },
{ path: '/register', component: Register },
{ path: '/profile', component: Profile },
{ path: '/packages', component: Packages },
{ path: '/support', component: Support },
{ path: '/admin', component: Admin },
{ path: '/apis', component: Apis },
]
const router = new VueRouter({
routes,
hashbang: false,
})
export default router
My app.js file
import Vue from 'vue'
import router from './Router/router'
import '../../public/css/dashboard/main.css';
import '../../public/css/custom.css';
window.Vue = require('vue');
const app = new Vue({
el: '#app',
router
});
And I switch to another component with router link to="my_component"
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)