I'm trying to get Passport setup on Laravel 5.3, but the Vue components don't seem to be showing up in the blade.
Here is the code for my blade:
#extends('connect.frame')
#section('title')
API Settings - KHConnect
#endsection
#section('header')
<!-- Page Header -->
<div class="content page-header" style="margin-bottom: 2em;">
<div class="container">
<h1 style="padding-top: 0.5em;font-size: 4em;">KHConnect</h1>
</div>
</div>
#endsection
#section('body')
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div class="row">
<passport-clients></passport-clients>
<passport-authorized-clients></passport-authorized-clients>
<passport-personal-access-tokens></passport-personal-access-tokens>
</div>
#endsection
And here is the code in my app.js:
/**
* First we will load all of this project's JavaScript dependencies which
* include Vue and Vue Resource. This gives a great starting point for
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component(
'passport-clients',
require('./components/passport/Clients.vue')
);
Vue.component(
'passport-authorized-clients',
require('./components/passport/AuthorizedClients.vue')
);
Vue.component(
'passport-personal-access-tokens',
require('./components/passport/PersonalAccessTokens.vue')
);
const app = new Vue({
el: '#app'
});
I have ran gulp and installed Laravel Elixir, and am loading <script src="{{asset('js/vue.min.js')}}"></script> and <script src="{{asset('js/app.js')}}"></script> in my blade.
Thanks in advance.
A vue-js vm requires a root element to work on. In the question the root element id is "app":
const app = new Vue({
el: '#app'
});
But it was missing in the HTML of the page. Adding a <div id="app">...</div> container solved the problem as seen in the comments.
In my case I had to run in cli following commands:
npm install
npm run production
Related
in laravel application using vue 3. when I try to load welcome.blade.php file it is not visible vue file content and console got following error Uncaught ReferenceError: Vue is not defined <anonymous> http://localhost:8000/js/app.js:37486 app.js code line 37486 is as var _Vue = Vue,
my app.js
require('./bootstrap');
const { createApp } = Vue;
Vue.component('mainapp', require('./components/mainapp.vue').dafault)
const app = createApp({
/* root component options */
});
app.mount('#app');
and welcome.blade.php
<html>
<body>
<div id="app">
<mainapp></mainapp>
</div>
</body>
<script src="{{mix('/js/app.js')}}"></script>
</html>
how could I fix this?
I need some answers to solve this prob
I Think you will need something like this in your app.js file:
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
import Vue from 'vue';
require('./bootstrap');
Vue.component('mainapp', require('./components/mainapp.vue').dafault)
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
const app = new Vue({
el: '#app'
});
Or do it in this way for Vue 3.0 +:
require('./bootstrap');
import { createApp } from 'vue';
import mainapp from './components/mainapp.vue';
createApp({
components: {
mainapp,
}
}).mount('#app');
i can't make run a simple Vue on my Laravel 5.4 project
i have the dependeces in package.json
"devDependencies": {
"axios": "^0.15.3",
"bootstrap-sass": "^3.3.7",
"cross-env": "^3.2.3",
"jquery": "^3.1.1",
"laravel-mix": "^0.8.3",
"lodash": "^4.17.4",
"vue": "^2.1.10"
},
I have the app.js placed on the webpack.mix
let mix = require('laravel-mix');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix.js('resources/assets/js/app.js', 'public/js');
In my app.js i have:
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
window.Vue = require('vue');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: '#contenedorPrincipal'
});
Example.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">Example Component</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>
And in my view, i have a div with id = contenedorPrincipal, in the layout and i call example in a single view..
app.blade.php
<div class="content-page" id="contenedorPrincipal">
<div class="content">
#yield('content')
</div>
in the vie myview.blade.php
#extends('layouts.app')
#section('content')
<div>
<example></example>
</div>
#stop
The npm run watch is working all the time....
When i open this view, nothing display, no error, no vue components detected from vue inspector....
i don't know what is the problem..
Fixed, i forget in my app.blade.php
<script src="{{ asset('js/app.js') }}"></script>
Thank you everyone!
working with Laravel 5.7 and Vue Js. this is
app.js
let Myheader = require('./components/Myheader.vue');
let Myfooter = require('./components/Myfooter.vue');
const app = new Vue({
el: '#app',
components:{Myheader,Myfooter}
});
blade.php file
<body>
<div id="app">
<Myheader></Myheader>
<Myfooter></Myfooter>
</div>
<script src="{{ asset('js/app.js')}}"></script>
</body>
but when I run artisan serve command it is not displayed vue component. how can fix this problem?
If you are use Laravel Mix 4.0+, try adding .default to your requires. This is needed when you use CommonJS to import modules.
let Myheader = require('./components/Myheader.vue').default;
let Myfooter = require('./components/Myfooter.vue').default;
Hello i am trying passport in laravel 5.3 using following link
https://laravel.com/docs/5.3/passport
in app.js
/**
* First we will load all of this project's JavaScript dependencies which
* include Vue and Vue Resource. This gives a great starting point for
* building robust, powerful web applications using Vue and Laravel.
*/
require('./bootstrap');
/**
* Next, we will create a fresh Vue application instance and attach it to
* the body of the page. From here, you may begin adding components to
* the application, or feel free to tweak this setup for your needs.
*/
Vue.component('example', require('./components/Example.vue'));
Vue.component(
'passport-clients',
require('./components/passport/Clients.vue')
);
Vue.component(
'passport-authorized-clients',
require('./components/passport/AuthorizedClients.vue')
);
Vue.component(
'passport-personal-access-tokens',
require('./components/passport/PersonalAccessTokens.vue')
);
const app = new Vue({
el: 'body'
});
in my view file
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<passport-clients></passport-clients>
<passport-authorized-clients></passport-authorized-clients>
<passport-personal-access-tokens></passport-personal-access-tokens>
</div>
</div>
</div>
#endsection
i have tired updating the node to 6.4.0 also on 6.7.0 but noting worked for me
also changed the gulp file
const elixir = require('laravel-elixir');
require('laravel-elixir-vue');
/*
|--------------------------------------------------------------------------
| Elixir Asset Management
|--------------------------------------------------------------------------
|
| Elixir provides a clean, fluent API for defining some basic Gulp tasks
| for your Laravel application. By default, we are compiling the Sass
| file for our application, as well as publishing vendor resources.
|
*/
elixir(function (mix){
mix.sass('app.scss')
.webpack('app.js');
});
but templates are not showing up in my views even in source code noting added against includes
Make sure that you included js file in layouts.app
#yield('content')
</div>
<!-- Scripts -->
**<script src="/js/app.js"></script>**
</body>
</html>
and in your app.js change body to #app
const app = new Vue({
el: '#app'
});
I faced the same issue, and this worked for me.
As you can see from the title I am trying out Laravel 5.3 and passport.
So I have gone through the steps to install Laravel passport and as far as I can see everything is in place.
I have put the corresponding Vue components into the markup of my home.blade.php as follows to test as per the docs which I have done like so
#extends('layouts.app')
#section('content')
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Dashboard</div>
<div class="panel-body">
You are logged in!
</div>
</div>
</div>
</div>
</div>
<passport-clients></passport-clients>
<passport-authorized-clients></passport-authorized-clients>
<passport-personal-access-tokens></passport-personal-access-tokens>
#endsection
Vue is detected as running in my dev tools however no Vue components are showing up.
Here is my app.js
Vue.component('example', require('./components/Example.vue'));
const app = new Vue({
el: 'body'
});
Vue.component(
'passport-clients',
require('./components/passport/Clients.vue')
);
Vue.component(
'passport-authorized-clients',
require('./components/passport/AuthorizedClients.vue')
);
Vue.component(
'passport-personal-access-tokens',
require('./components/passport/PersonalAccessTokens.vue')
);
I am getting the error
vue.common.js?4a36:1019 [Vue warn]: Unknown custom element: <passport-clients> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Any idea how I can fix this?I am fairly new to Vue
In your app.js file, import the components immediately below or in place of the example component, but before creating the new Vue object where it gets bound to the DOM.
Don't forget to run gulp as well. :)
I had the same issue with the following resolution with Laravel 5.4:
Find resources/assets/app.js.
put all Vue.component... before new Vue (not after)
in each Vue.component's import, append .default
Vue.component(
'passportclients',
require('./components/passport/Clients.vue').default
);
Vue.component(
'passportauthorizedclients',
require('./components/passport/AuthorizedClients.vue').default
);
Vue.component(
'passportpersonalaccesstokens',
require('./components/passport/PersonalAccessTokens.vue').default
);
And then run npm run dev again.
I had the same problem and it turned out that this matters:
put the code
const app = new Vue({
el: 'body'
});
at the END of the app.js file.
That started showing the components on the webpage.
Tarun is correct:
Make sure you include your vue references in app.js before:
const app = new Vue({
el: 'body'
});
I have fixed that issue, we do not need to include any Vue libraries, laravel by default provides this (this is for laravel 5.4 and > ) :
Go to your project-folder/public/js/app.js
Find the code where your passport clients, passport authorized clients and passport-personal-access-tokens are registered.
Replace the code with :
Vue.component('example-component', webpack_require(41));
Vue.component('passport-clients', webpack_require(44));
Vue.component('passport-authorized-clients', webpack_require(50));
Vue.component('passport-personal-access-tokens', webpack_require(55));
var app = new Vue({ el: '#app' });
Note : Register the Vue.component before "Var app = new Vue"