kaygero

kaygero

Member Since 3 Months Ago

Experience Points 270
Experience Level 1

4,730 experience to go until the next level!

In case you were wondering, you earn Laracasts experience when you:

  • Complete a lesson — 100pts
  • Create a forum thread — 50pts
  • Reply to a thread — 10pts
  • Leave a reply that is liked — 50pts
  • Receive a "Best Reply" award — 500pts
Lessons Completed 0
Lessons
Completed
Best Reply Awards 0
Best Reply
Awards
  • start-engines Created with Sketch.

    Start Your Engines

    Earned once you have completed your first Laracasts lesson.

  • first-thousand Created with Sketch.

    First Thousand

    Earned once you have earned your first 1000 experience points.

  • 1-year Created with Sketch.

    One Year Member

    Earned when you have been with Laracasts for 1 year.

  • 2-years Created with Sketch.

    Two Year Member

    Earned when you have been with Laracasts for 2 years.

  • 3-years Created with Sketch.

    Three Year Member

    Earned when you have been with Laracasts for 3 years.

  • 4-years Created with Sketch.

    Four Year Member

    Earned when you have been with Laracasts for 4 years.

  • 5-years Created with Sketch.

    Five Year Member

    Earned when you have been with Laracasts for 5 years.

  • school-session Created with Sketch.

    School In Session

    Earned when at least one Laracasts series has been fully completed.

  • welcome-newcomer Created with Sketch.

    Welcome To The Community

    Earned after your first post on the Laracasts forum.

  • full-time-student Created with Sketch.

    Full Time Learner

    Earned once 100 Laracasts lessons have been completed.

  • pay-it-forward Created with Sketch.

    Pay It Forward

    Earned once you receive your first "Best Reply" award on the Laracasts forum.

  • subscriber-token Created with Sketch.

    Subscriber

    Earned if you are a paying Laracasts subscriber.

  • lifer-token Created with Sketch.

    Lifer

    Earned if you have a lifetime subscription to Laracasts.

  • lara-evanghelist Created with Sketch.

    Laracasts Evangelist

    Earned if you share a link to Laracasts on social media. Please email [email protected] with your username and post URL to be awarded this badge.

  • chatty-cathy Created with Sketch.

    Chatty Cathy

    Earned once you have achieved 500 forum replies.

  • lara-veteran Created with Sketch.

    Laracasts Veteran

    Earned once your experience points passes 100,000.

  • 10k-strong Created with Sketch.

    Ten Thousand Strong

    Earned once your experience points hits 10,000.

  • lara-master Created with Sketch.

    Laracasts Master

    Earned once 1000 Laracasts lessons have been completed.

  • laracasts-tutor Created with Sketch.

    Laracasts Tutor

    Earned once your "Best Reply" award count is 100 or more.

  • laracasts-sensei Created with Sketch.

    Laracasts Sensei

    Earned once your experience points passes 1 million.

  • top-50 Created with Sketch.

    Top 50

    Earned once your experience points ranks in the top 50 of all Laracasts users.

19 May
3 months ago
15 May
3 months ago

kaygero started a new conversation Laravel + Vue.js: [Vue Warn]: Failed To Mount Component: Template Or Render Function Not Defined.

Hi, I am trying to use vue-router links to load my home and about.vue but I get this error:

app.js:64725 [Vue warn]: Failed to mount component: template or render function not defined.

found in

---> <Anonymous>
       <Root>
warn @ app.js:64725
mountComponent @ app.js:68122
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:73129
./node_modules/vue/dist/vue.common.dev.js.Vue.$mount @ app.js:76014
init @ app.js:67216
merged @ app.js:67399
createComponent @ app.js:70058
createElm @ app.js:70005
updateChildren @ app.js:70296
patchVnode @ app.js:70399
patch @ app.js:70560
Vue._update @ app.js:68034
updateComponent @ app.js:68152
get @ app.js:68563
run @ app.js:68638
flushSchedulerQueue @ app.js:68396
(anonymous) @ app.js:66080
flushCallbacks @ app.js:66006
Promise.then (async)
timerFunc @ app.js:66033
nextTick @ app.js:66090
queueWatcher @ app.js:68488
update @ app.js:68628
notify @ app.js:64836
reactiveSetter @ app.js:65161
(anonymous) @ app.js:63967
(anonymous) @ app.js:63966
updateRoute @ app.js:63425
(anonymous) @ app.js:63303
(anonymous) @ app.js:63412
step @ app.js:63142
step @ app.js:63149
runQueue @ app.js:63153
(anonymous) @ app.js:63407
step @ app.js:63142
(anonymous) @ app.js:63146
(anonymous) @ app.js:63392
(anonymous) @ app.js:63220
iterator @ app.js:63371
step @ app.js:63145
step @ app.js:63149
runQueue @ app.js:63153
confirmTransition @ app.js:63400
transitionTo @ app.js:63302
push @ app.js:63703
push @ app.js:63993
handler @ app.js:61870
invokeWithErrorHandling @ app.js:65954
invoker @ app.js:66279
original._wrapper @ app.js:71632

app.js:

require('./bootstrap');
require('quasar-framework/dist/quasar.mat.css');

window.Vue = require('vue');

import Quasar from 'quasar-framework';
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(Quasar);
Vue.use(VueRouter)


import Myheader from './components/Myheader';
import Myfooter from './components/Myfooter';

let Home = require('./components/Home.vue');
let About = require('./components/About.vue');

const routes = [
    { path: '/home', component: Home },
    { path: '/about', component: About }
  ]

  const router = new VueRouter({
    routes // short for `routes: routes`
  })

const app = new Vue({
    el: '#app',
    router,
    components:{Myheader, Myfooter}

});

customers.blade.php:

<!DOCTYPE html>
<html lang="{{ config('app.locale') }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- CSRF Token -->
<!-- <meta name="csrf-token" content="{{ csrf_token() }}"> -->

<title>Document</title>

<!-- Fonts -->
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons' rel="stylesheet" type="text/css">

<script>
window.Laravel = {!! json_encode([
'csrfToken' => csrf_token(),
]) !!};
</script>

</head>
<body>

<div id="app">
  <!-- <app></app> -->
  <Myheader></Myheader>
    <router-view></router-view>
  <Myfooter></Myfooter>
</div>

<script src="{{ asset('js/app.js') }}"></script>
</body>
</html>

<!-- ============================= -->
<!-- <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>PSD systems</title>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">  
</head>
<body>

    <div id="app">
        <Myheader></Myheader>
        <Myfooter></Myfooter>
    </div>
    <script src="{{ asset('js/app.js') }}"></script>
</body>
</html> -->

Myheader.vue:


<template>
<div>

  <q-layout>
    <!-- Header -->
    <div slot="header" class="toolbar bg-green-8">
      <q-toolbar-title :padding="1">
          PSD System
      </q-toolbar-title>
      <div>
        <q-tabs slot="navigation" class="toolbar bg-green-8">
        <q-tab><router-link to="/home">Home</router-link></q-tab>
        <q-tab><router-link to="/about">About</router-link></q-tab>
        </q-tabs>
      </div>
    </div>


</q-layout>

</div>
</template>

<script>
export default {

data: function() {
  return {

  };
},

mounted() {
  console.log('Component mounted.')
  }
}
</script>

I'm also using quasar framework. I just need the router-links to load the home and about vue but this error keeps appearing... Ive searched for quite a while now and still nothing.....

Thanks! Any help is appreciated!

14 May
3 months ago

kaygero left a reply on App.js:40853 [Vue Warn]: Unknown Custom Element: <navbar> - Did You Register The Component Correctly?

@YEZAWHEIN - Can I ask one last question? about my navbar? It seems the links aren't showing (login & register). Thanks again mate!

kaygero left a reply on App.js:40853 [Vue Warn]: Unknown Custom Element: <navbar> - Did You Register The Component Correctly?

@YEZAWHEIN - What about the customers? Thanks by the way! I added this: app.js

require('./bootstrap');
import Vue from "vue";
import VueRouter from "vue-router";
import router from "./routes";
import navbar from "./components/Navbar.vue";
import customers from "./components/Customers.vue";

Vue.use(VueRouter);


const app = new Vue({
  el: "#app",

  router: router,
  components : {
    navbar,
    customers
}
});

It shows up but not the data inside my table?

kaygero left a reply on App.js:40853 [Vue Warn]: Unknown Custom Element: <navbar> - Did You Register The Component Correctly?

@YEZAWHEIN - app.js:

require('./bootstrap');
import Vue from "vue";
import VueRouter from "vue-router";
import router from "./routes";

Vue.use(VueRouter);


const app = new Vue({
  el: "#app",

  router: router
});

kaygero started a new conversation App.js:40853 [Vue Warn]: Unknown Custom Element: <navbar> - Did You Register The Component Correctly?

Hi, I'm trying out vue-router and laravel and trying out custom components. But I am getting this error:

[Vue warn]: Unknown custom element: <navbar> - did you register the component correctly?

and

[Vue warn]: Unknown custom element: <navbar> - did you register the component correctly?

I only put two custom components for my navbar and main vue apps. These worked before, but since I imported and used vue-router these errors appear.

Navbar.vue:

<template>
  <div id="app">
    <nav class="navbar navbar-expand-sm navbar-light mb-2 " style="background-color: #007E33;">
        <div class="container">
            <div class="container">
            </div>
            <form class="form-inline my-2 my-lg-0 navbar-nav ml-auto">
            <ul class="nav" >
                <li class="form-inline" v-if="!loggedIn"><router-link :to="{ 'name': 'login' }" style="color: #fafafa;"> Login </router-link></li>
                <li v-if="!loggedIn"><router-link :to="{ 'name': 'register' }" style="color: #fafafa;"> Register </router-link></li>
                <li v-if="loggedIn"><router-link :to="{ 'name': 'logout' }" style="color: #fafafa;"> Logout </router-link></li>
            </ul>
        </form>
        </div>
    </nav>
  </div>
</template>

web.php:

<?php

Route::get('/', function () {
    return view('welcome');
});

Auth::routes();

Route::get('/home', '[email protected]')->name('home');

Thanks! Any help is appreciated!

13 May
3 months ago

kaygero started a new conversation Laravel Vuejs Error: Uncaught ReferenceError: Login Is Not Defined

Hello Everyone! I'm trying to use vue-router links in this CRUD App to load both the Login and Register pages. But I Seem to be getting this error:

Uncaught ReferenceError: Login is not defined
    at Module../resources/js/app.js (app.js:52670)
    at __webpack_require__ (app.js:20)
    at Object.0 (app.js:52965)
    at __webpack_require__ (app.js:20)
    at app.js:84
    at app.js:87

I already imported vue-router in my app.js and put up the routes in routes.js app.js:

require('./bootstrap');

import VueRouter from 'vue-router'

Vue.use(VueRouter)

Vue.component('navbar', require('./components/Navbar.vue').default);
Vue.component('customers', require('./components/Customers.vue').default);
Vue.component('login', require('./components/auth/Login.vue').default);

const router = new VueRouter({
    routes: [
         { path: '/login', component: Login },
         { path: '/register', component: Register }
    ]
})

const app = new Vue({
    el: '#app',

    router: router
})

routes.js

import App from './App'
import Login from './components/auth/Login'
import Logout from './components/auth/Logout'
import Register from './components/auth/Register'

export const routes = [
  {
    path: '/customers',
    name: 'customers',
    component: App,
    meta: {
      requiresAuth: true,
    }
  },
  {
    path: '/login',
    name: 'login',
    component: Login,
    meta: {
      requiresVisitor: true,
    }
  },
  {
    path: '/register',
    name: 'register',
    component: Register,
    meta: {
      requiresVisitor: true,
    }
  },
  {
    path: '/logout',
    name: 'logout',
    component: Logout
  }
]

export default routes

api.php:

<?php

use Illuminate\Http\Request;

Route::middleware('auth:api')->get('/user', function (Request $request) {
    return $request->user();
});

Route::post('/login','[email protected]');
Route::post('/register','[email protected]');
Route::middleware('auth:api')->post('/logout', '[email protected]');

Route::get('customers','[email protected]');

Route::get('customer/{CustomerID}','[email protected]');

Route::post('customer','[email protected]');

Route::put('customer','[email protected]');

Route::delete('customer/{CustomerID}','[email protected]');
10 May
3 months ago

kaygero left a reply on Laravel Vuejs [Vue Warn]: Unknown Custom Element: <router-link>

@TYKUS - Thanks. But now this error appears when I use this as my app.js. app.js:

import VueRouter from 'vue-router'

Vue.use(VueRouter)

Vue.component('navbar', require('./components/Navbar.vue').default);
Vue.component('customers', require('./components/Customers.vue').default);
Vue.component('login', require('./components/auth/Login.vue').default);

const router = new VueRouter({
    routes: [
         { path: '/login', component: Login },
         { path: '/register', component: Register }
    ]
})

const app = new Vue({
    el: '#app',

    router: router
})

Error:

Uncaught ReferenceError: Customers is not defined
    at Module../resources/js/app.js (app.js:52670)
    at __webpack_require__ (app.js:20)
    at Object.0 (app.js:52965)
    at __webpack_require__ (app.js:20)
    at app.js:84
    at app.js:87

But when I comment out these two links:

   { path: '/login', component: Login },
   { path: '/register', component: Register }

I get the error

[vue-router] Route with name 'login' does not exist
[vue-router] Route with name 'register' does not exist

I already have a routes.js file here:

import App from './App'
import Login from './components/auth/Login'
import Logout from './components/auth/Logout'
import Register from './components/auth/Register'

export const routes = [
  {
    path: '/customers',
    name: 'customers',
    component: App,
    meta: {
      requiresAuth: true,
    }
  },
  {
    path: '/login',
    name: 'login',
    component: Login,
    meta: {
      requiresVisitor: true,
    }
  },
  {
    path: '/register',
    name: 'register',
    component: Register,
    meta: {
      requiresVisitor: true,
    }
  },
  {
    path: '/logout',
    name: 'logout',
    component: Logout
  }
]

export default routes

Thanks again, mate!

08 May
3 months ago

kaygero left a reply on Laravel Vuejs [Vue Warn]: Unknown Custom Element: <router-link>

@TYKUS - I tried adding this into my app.js:

require('./bootstrap');

window.Vue = require('vue');


Vue.component('navbar', require('./components/Navbar.vue').default);
Vue.component('customers', require('./components/Customers.vue').default);
Vue.component('login', require('./components/auth/Login.vue').default);

const router = new VueRouter({
    routes: [
        { path: '/customers', component: Customers },
        { path: '/login', component: Login }
    ]
})

const app = new Vue({
    el: '#app',

    router: router
});

But i get this error:

app.js:49978 Uncaught ReferenceError: VueRouter is not defined
    at Object../resources/js/app.js (app.js:49978)
    at __webpack_require__ (app.js:20)
    at Object.0 (app.js:50261)
    at __webpack_require__ (app.js:20)
    at app.js:84
    at app.js:87

Where do i define VueRouter? Does it need to be in another js file? Thanks

kaygero left a reply on Laravel Vuejs [Vue Warn]: Unknown Custom Element: <router-link>

@TYKUS - Do i put this in my app.js file or just make a new file?

07 May
3 months ago

kaygero started a new conversation Laravel Vuejs [Vue Warn]: Unknown Custom Element: <router-link>

Hi everyone! I'm trying to make this crud app with authentication. But i'm experiencing this error:

app.js:38573 [Vue warn]: Unknown custom element: <router-link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Navbar> at resources/js/components/Navbar.vue
       <Root>

I already installed vue router via npm and imported vue-router in my app.js

app.js:



require('./bootstrap');

window.Vue = require('vue');

import VueRouter from 'vue-router'

Vue.use(VueRouter)



 Vue.component('navbar', require('./components/Navbar.vue').default);
Vue.component('customers', require('./components/Customers.vue').default);
Vue.component('login', require('./components/auth/Login.vue').default);


const app = new Vue({
    el: '#app',
});

Navbar.vue:

<template>
  <div id="app">
    <nav class="navbar navbar-expand-sm navbar-light mb-2 " style="background-color: #007E33;">
        <div class="container">
            <div class="container">
            </div>
            <form class="form-inline my-2 my-lg-0 navbar-nav ml-auto">
            <ul class="nav" >
                <li class="form-inline" v-if="!loggedIn"><router-link :to="{ name: 'login' }" style="color: #fafafa;"> Login </router-link></li>
                <li v-if="!loggedIn"><router-link :to="{ name: 'register' }" style="color: #fafafa;"> Register </router-link></li>
                <li v-if="loggedIn"><router-link :to="{ name: 'logout' }" style="color: #fafafa;"> Logout </router-link></li>
            </ul>
        </form>
        <!-- Login  -->
        </div>
    </nav>
  </div>
</template>


Thanks and Cheers!