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"
Related
I have a project in Laravel where I import my app.js is:
require('./bootstrap');
window.Vue = require('vue');
const app = new Vue({
el: '#app',
data: {},
methods: {},
});
This file is imported in my main layout (app.blade.php) like so:
<div id="app">
#yield('content')
</div>
<script src="{{asset('js/app.js')}}"></script>
#yield('scripts')
I guess you can't instantiate a new Vue instance within another one... so I MUST work with a single Vue instance. The #app div encompasses all of the dynamic content of my multiple-page application, and so my question is... on different pages, how do I separate my Vue.js code? If I put all of the code in app.js, it will get cluttered, and my code will have missing references depending on which page the user is on.
I tried writing a separate <script></script> for each page, but this requires me to input the CSRF token for each page, but this feels DRYish.
How do people do this?
Your route should be like this to accept vue router
Route::get('/{view?}', function () {
return view('vue');
})->where('view', '^(?!api\/)[\/\w\.-]*');
this will accept every route exept api routes
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;
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
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.
I'm pretty new to using browserify etc. for js development. Also I'm new to Vue. I wanted to create additional custom components for my application. However I fail at so many points even when following different tutorials step by step.
This is What I currently got:
example.js
var MyComponent = Vue.extend({
data: function() {
return { message: 'This is a test' }
},
template: '{{ message }}'
});
Vue.component('my-component', MyComponent);
new Vue({
el: '#example'
});
app.js
require('spark-bootstrap');
require('./../example.js');
require('./components/bootstrap');
require('./backoffice/main.js');
var app = new Vue({
mixins: [require('spark')]
});
view.blade.php
<div id="example">
<my-component></my-component>
</div>
gulpfile.js
elixir(function(mix) {
mix.less('app.less')
.browserify('app.js', null, null, { paths: 'vendor/laravel/spark/resources/assets/js' })
.copy('node_modules/sweetalert/dist/sweetalert.min.js', 'public/js/sweetalert.min.js')
.copy('node_modules/sweetalert/dist/sweetalert.css', 'public/css/sweetalert.css');
});
My error
app.js:24638[Vue warn]: Unknown custom element: <my-component> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
Since example.js is a separate module, you'll need to import Vue in that file as well. I assume you've done that. You also don't want to new up a Vue instance in that file though, because you're already doing that later on. If <my-component> is inside of the spark body you already have a Vue app running.