can't initialized Vue in laravel 5.4 - php

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!

Related

How to structure Vue.js instances in a Laravel project?

I have an application with multiple web pages. On each webpage, I want to be able to bind a Vue instance to some element on the page as to give it a more dynamic user interaction.
In the base Laravel project, you're supposed to bind a Vue instance to #app in app.js which I've done. Including any more instances, however, give a "element not found" error when you're on any page that doesn't include that element. I imagine you're not supposed to put all of your instances in app.js...
What is the general architecture for having a different Vue instance on each page? Do I make a new js file for each page, and include it?
Sorry for my naivety!
You can create a new Vue instance on a yielded scripts section in app.blade.php that every view extends (mostly) for each page where needed to avoid the Vue warning
For example, Laravel Vapor website does* this, in the main page you can find this code
*they use a CDN to include the library instead of the compiled one from webpack
A Vue instance just for the Form
<script>
var app = new Vue({
el: '#form',
data: {
email: '',
submitted: false,
submitting: false
},
methods: {
onSubmit: function () {
this.submitting = true;
fetch('/api/early-access', {
method: 'POST',
body: JSON.stringify({ email: this.email }),
headers: {
'Content-Type': 'application/json'
}
}).then(response => {
this.submitted = true;
this.submitting = false;
});
}
}
})
</script>
In layouts/app.blade.php yield a section for the scripts right before the closing tag of the body, for example
<main class="py-4">
#yield('content')
</main>
</div>
#yield('scripts')
</body>
Then instantiate a new Vue instance in the Blade view file of a page like so
#extends('layouts.app')
#section('content')
<div class="container">
<div id="home-page"></div>
</div>
#endsection
#section('scripts')
<script>
new Vue({
el: '#home-page',
});
</script>
#stop
Hope this helps
I just use a single Vue instance.
I have a master blade layout in which the body section looks like the code given below and I extend it for all the pages. It's basically a template with head tag filled with #yield('tags_like_meta', default_value) and some other javascript imports.
<body>
<div id="app">
#yield('contents')
</div>
</body>
And then I have a single Vue instance like this on my js file.
const app=new Vue({el:"#app"});
For different pages I use Vue-router to dynamically load the component. For example, if I want my contact page to be loaded via Vue, I will have my contact_page.blade.php look like this
#extends(layout.master)
#section('contents')
<router-view></router-view>
#endsection
And Vue-router will handle the rendering if I have the contact page url specified in the routes.
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/contact',
name: 'contact',
component: () => import('./components/contact/index')
}]
});
This way, you can work with single Vue instance (as mentioned in the docs)

Vue component not showing (Laravel 5.3)

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

Vue Components not showing with passport in laravel 5.3

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.

Vue Components not showing up using passport in laravel 5.3

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"

anahkiasen/former form builder lib for Lumen / (Laravel micro framework)

I'm using Lumen, the Laravel recently new micro framework.
I was searching for a form builder and I found Former :
http://anahkiasen.github.com/former/
I put in a simple blade view the following code :
use Former\Facades\Former;
echo Former::open()->method('GET');
echo Former::text('name')->required();
echo Former::close();
and I get the following error :
ErrorException in Container.php line 776:Class former does not exist (View: ...)
so I added the ServiceProvider to my app.php :
$app->register('Former\FormerServiceProvider');
and I get the following error :
Fatal error: Call to undefined method Illuminate\Config\Repository::package() in D:\...\vendor\anahkiasen\former\src\Former\FormerServiceProvider.php on line 147
My question is : how can I get it done with Lumen?
At worse, how can I get a good form builder lib with Lumen?
MANY thanks in advance
did you get the 4.0 branch, in Laravel 5 Illuminate\Config\Repository class has no method called package (http://laravel.com/api/5.0/Illuminate/Config/Repository.html)
Since Lumen uses illuminate/config 5.0.* you should get 4.0 branch for form builder. (https://github.com/formers/former#for-laravel-5-use-the-40-branch)
This composer.json configuration seems works in my App.
"repositories": [
{
"type": "git",
"url": "https://github.com/formers/former.git"
}
],
"require": {
"laravel/lumen-framework": "5.0.*",
"vlucas/phpdotenv": "~1.0",
"anahkiasen/former": "4.0.x-dev"
},
After do:
composer update -vvv
I update my bootstrap/app.php:
/*
|--------------------------------------------------------------------------
| Register Service Providers
|--------------------------------------------------------------------------
|
| Here we will register all of the application's service providers which
| are used to bind services into the container. Service providers are
| totally optional, so you are not required to uncomment this line.
|
*/
// $app->register('App\Providers\AppServiceProvider');
$app->register('Former\FormerServiceProvider');
Testing in app/Http/routes.php:
/*
|--------------------------------------------------------------------------
| Application Routes
|--------------------------------------------------------------------------
|
| Here is where you can register all of the routes for an application.
| It's a breeze. Simply tell Laravel the URIs it should respond to
| and give it the controller to call when that URI is requested.
|
*/
use Former\Facades\Former;
$app->get('/', function() use ($app) {
echo Former::open()->method('GET');
echo Former::text('name')->required();
echo Former::close();
});
Output:
<form accept-charset="utf-8" class="form-horizontal" method="GET">
<div class="form-group required">
<label for="name" class="control-label col-lg-2 col-sm-4">Name<sup>*</sup></label>
<div class="col-lg-10 col-sm-8">
<input class="form-control" required="true" id="name" type="text" name="name">
</div>
</div>
</form>
All seems works well. I think the problem is outdated packages.
Update
I change my app/Http/routes.php into something like this:
$app->get('/', function() use ($app) {
return view('foo');
});
And this is my foo.blade.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Foo</title>
</head>
<body>
{!! Former\Facades\Former::open()->method('GET'); !!}
{!! Former\Facades\Former::text('name')->required(); !!}
{!! Former\Facades\Former::close(); !!}
</body>
</html>
And it works.

Categories