So I am trying to build a new Laravel app with Vue. For some reason, the example component that the app comes with works fine, but my own doesn't. Here's my file structure and code:
views/layout/vue.blade.php
<html>
<head>
<title>Skat</title>
</head>
<meta name="csrf-token" content="{{ csrf_token() }}">
<body>
<div id="app">
#yield("content")
</div>
<script src="/js/app.js"></script>
</body>
</html>
resources/views/vue.blade.php this is working fine!
#extends('layouts.vue')
#section('content')
<example-component></example-component>
#endsection
resources/js/components/ExampleComponent.vue
<template>
<div class="container">
some stuff ..
</div>
</template>
<script>
export default {
name: 'example-component',
mounted() {
console.log('Component mounted.')
}
}
</script>
resources/views/home.blade.php this is NOT working :(
#extends('layouts.vue')
#section('content')
<home></home>
#endsection
resources/js/components/Home.vue
<template>
<div class="container-fluid d-flex h-100 flex-column">
test test
</div>
</template>
<script>
export default {
name: 'home',
components: {
}
}
</script>
<style scoped>
...
</style>
routes/web.php
Route::get('/', function () {
return view('vue');
});
Route::get('/home', function () {
return view('home');
});
resources/js/app.js
...
import ExampleComponent from './components/ExampleComponent.vue';
import Home from './components/Home.vue';
const app = new Vue({
el: '#app',
components: {
ExampleComponent,
Home
}
});
I am not getting any errors or anything. I guess somewhere I didn't set it up right, but I'm confused!
Thanks! :)
Don't use components: {} on the root instance. Explicitly declare it with:
Vue.component('example-component', ExampleComponent).
Even better.
const files = require.context('./', true, /\.vue$/i);
files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default));
Related
I have a Laravel project using vue js.
I made a toggle component with Vue.js to display and hide an element.
But the toggle button does not appear in my page.
What's wrong with my code ? I can find only Hello component appear on the page.
app.js
require('./bootstrap');
import { createApp } from 'vue';
import Hello from './components/Hello.vue';
import Toggle from './components/Toggle.vue';
createApp({
components: {
Hello,
Toggle,
}
}).mount('#app');
Toggle.vue
<template>
<div>
<button #click="toggleVisibility">Toggle</button>
<div v-if="visible">
<slot></slot>
</div>
</div>
</template>
<script>
export default {
name: 'Toggle',
data() {
return {
visible: true
};
},
methods: {
toggleVisibility() {
this.visible = !this.visible;
}
}
};
</script>
Hello.vue
<template>
<h1>{{message}}</h1>
</template>
<script>
export default {
name: 'Hello',
data() {
return {
message: 'Hello world'
};
}
};
</script>
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>
</head>
<body class="antialiased">
<div id="app">
<Hello/>
<Toggle>
<p>This will be appeared</p>
</Toggle>
</div>
</body>
<script src="{{ mix('/js/app.js') }}"></script>
</html>
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 the git: https://github.com/woottonn/fullstack
Here's my code:
web.php
<?php
Route::any('{any}', function(){
return view('welcome');
})->where('any', '.*');
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>
</html>
app.js
require('./bootstrap');
import Vue from 'vue'
import router from './router'
Vue.component('mainapp', require('./components/mainapp.vue').default)
const app = new Vue({
el: '#app',
router
});
router.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import myFirstVuePage from './components/pages/myFirstVuePage'
const routes = [
{
path: '/my-new-vue-route',
component: myFirstVuePage
}
];
export default new Router({
mode: 'history',
routes
})
mainapp.vue
<template>
<div>
<h1>VUE Componenty</h1>
<router-view></router-view>
</div>
</template>
myFirstVuePage.vue
<template>
<div>
<h1>This is my first page...</h1>
</div>
</template>
Am I missing obvious something here?
--- EDIT: Going directly to the URL (/my-new-vue-route) throws an error, so that's not working either. ---
In routes/web.php, add this:
Route::get('/{vue_capture?}', function () {
return view('welcome');
})->where('vue_capture', '[\/\w\.-]*');
This helps the Laravel to capture URLs generated by Vue and is a solution for routing when history mode is set, as you seem to have.
export default new Router({
mode: 'history',
routes
})
Working on my first SPA with laravel, vue, vuex, & vue-router. I have a MainApp.vue(to to house the whole app), Header.vue, and a Dashboard.vue component. The Header.vue is being rendered twice in the browser.
//MainApp.vue
<template>
<div id="main">
<Header />
<div class="content">
<router-view></router-view>
</div>
</div>
</template>
<script>
import Header from './Header.vue'
export default {
name: 'main-app',
components: {
Header
}
}
</script>
The app.js
require('./bootstrap');
import Vue from 'vue';
import VueRouter from 'vue-router';
import Vuex from 'vuex';
import {routes} from './routes';
import MainApp from './components/MainApp.vue';
import Header from './components/Header.vue';
Vue.use(VueRouter);
Vue.use(Vuex);
const router = new VueRouter({
routes,
mode: 'history'
});
const app = new Vue({
el: '#app',
router,
components: {
MainApp,
Header
}
});
the body of the welcome.blade.php
<body style="font-family: 'Rajdhani', sans-serif;">
<div id="app">
<main-app />
</div>
<!-- Scripts -->
<script async src="{{ mix('js/app.js') }}"></script>
<script src="{{ asset('js/jquery-3.3.1.min.js') }}" ></script>
<script src="{{ asset('js/popper.min.js') }}" ></script>
<script src="{{ asset('js/bootstrap.min.js') }}" ></script>
<script src="{{ asset('js/mdb.min.js') }}" ></script>
</body>
please I try to make my first vuejs - laravel application,
and I get a trouble with layouts and assets, this is my code:
Here i try to detect the layout from route, it dosen't work very well, because when i refresh the page, it chage the main layout first and after go the layout needed
app.vue
<template>
<div>
<div v-if="$route.meta.layout == 'front'">
<frontLayout></frontLayout>
</div>
<div v-else-if="$route.meta.layout == 'admin'">
<adminLayout></adminLayout>
</div>
<div v-else>
<mainLayout></mainLayout>
</div>
</div>
</template>
<script>
let frontLayout = require('./layouts/frontLayout.vue');
let mainLayout = require('./layouts/mainLayout.vue');
import {mapState} from 'vuex'
export default {
components:{frontLayout,mainLayout},
computed: {
...mapState({
userStore: state => state.userStore
})
},
created(){
console.log('app vue')
}
}
</script>
For the asset after setting the webpack laravel-mix like this:
webpack.mix.js
mix.combine(['resources/assets/front/css/*','resources/assets/front/plugin-css/*','resources/assets/front/style.css'], 'public/css/front.css')
.options({
processCssUrls: false,
});
mix.combine(['resources/assets/front/script/*','resources/assets/front/plugin-script/*'], 'public/js/front.js')
.options({
processCssUrls: false,
});
I try to import the front.css file in the frontLayout.vue when it was loaded like this:
frontLayout.vue
<template></template>
<script>
export default {
}
</script>
<style scoped>
#import '../../../../public/css/front.css';
</style>
But it dosen't work always ! any help please. Thanks
I'm following this video: https://laracasts.com/series/learn-vue-2-step-by-step/episodes/26?autoplay=true
My initial problem is described here, but that was resolved. I include it here so you can see what steps I've taken so far.
Now, I'm getting this warning: [Vue warn]: Failed to mount component: template or render function not defined.
A warning is not so bad, but the router-view is not showing up. That is, there is nothing showing up below the Home and About links.
master.blade.php
<!doctype html>
<html lang="en">
<head>
<title>My App</title>
<link rel="stylesheet" href="/css/app.css">
</head>
<body>
<div id="app">
<router-link to="/">Home</router-link>
<router-link to="/about">About</router-link>
<router-view></router-view>
</div>
<script src="/js/app.js"></script>
</body>
</html>
Home.vue
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Home Page</div>
<div class="panel-body">
I'm an example component!
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
mounted() {
console.log('Component mounted.')
}
}
</script>
Any help would be appreciated.
Thanks!
[Edit 1]
resources/assets/js/app.js
import './bootstrap';
import router from './routes';
new Vue({
el: '#app',
router
});
resources/assets/js/bootstrap.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import axios from 'axios';
window.Vue = Vue;
Vue.use(VueRouter);
window.axios = axios;
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
let token = document.head.querySelector('meta[name="csrf-token"]');
if (token) {
window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;
} else {
console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');
}
[Edit 2]
resources/assets/js/routes.js
import VueRouter from 'vue-router';
let routes = [
{
path: '/',
component: require('./views/Home.vue')
}
];
export default new VueRouter({
routes
});
Ah! Thanks to TheFallen's questions, I see my problem. Here's what my routes.js file should look like:
import VueRouter from 'vue-router';
import Home from './views/Home.vue';
let routes = [
{
path: '/',
component: Home
}
];
export default new VueRouter({
routes
});