VueJS in Laravel

Limbaje de Programare PHP
1

Azi am inceput sa aprofundez VueJS in combinatie cu Laravel. (Laravel cunosc destul de bine)
Am facut proiect nou cu ultima versiune Laravel instalat cu toate cele necesare in el prin “composer”, .etc. Nu stiu de ce, nu-mi porneste scriptul… Primesc o eroare si nu stiu ce sa verific si cum sa rezolv… Imi bat capul de 2 ore, nu prea apelez la lume decat dupa ce incerc singur ceva timp si vad ca nu reusesc.
Eroarea: [Vue warn]: Unknown custom element: < router-view > - did you register the component correctly? For recursive components, make sure to provide the “name” option.
(found in )

app.js:


/**
 * 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');
import VueRouter from 'vue-router';

window.Vue.use(VueRouter);

import CompaniesIndex from './components/companies/CompaniesIndex.vue';
import CompaniesCreate from './components/companies/CompaniesCreate.vue';
import CompaniesEdit from './components/companies/CompaniesEdit.vue';

const routes = [
    {
        path: '/',
        components: {
            companiesIndex: CompaniesIndex
        }
    },
    {path: '/admin/companies/create', component: CompaniesCreate, name: 'createCompany'},
    {path: '/admin/companies/edit/:id', component: CompaniesEdit, name: 'editCompany'},
]

const router = new VueRouter({ routes })

const app = new Vue({ router }).$mount('#app')

.package.json:

"devDependencies": {
        "axios": "^0.19",
        "bootstrap": "^4.0.0",
        "cross-env": "^7.0",
        "jquery": "^3.2",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.13",
        "popper.js": "^1.12",
        "resolve-url-loader": "^2.3.1",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "vue": "^2.5.17",
        "vue-template-compiler": "^2.6.10"
    },
    "dependencies": {
        "vue-router": "^3.1.6"
    }

Companies index:

@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">Companies</div>

                    <div class="panel-body table-responsive">

                        <router-view name="companiesIndex"></router-view>
                        <router-view></router-view>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection

Se afiseaza pe pagina totul, se strica treaba de la router-view bauiesc, ca nu-mi afiseaza tabelul cu datele din DB
Multumesc!

2

De ce incerci sa apelezi de 2 ori ?

Se pare ca nu i-ai facut import sau nu l-ai indicat la components

In general, nu ai aratat codul intreg, arata totul codul ca sa putem sa te ajutam mai bine.

3

Ce anume apelez de 2 ori? Scuze dar nu-mi dau seama.

Folderul “components” are in el folderul “companies” cu “CompaniesIndex, CompaniesCreate, CompaniesEdit”.
Cred ca tine de import dar nu stiu exact cum se face, sau cum sa verific daca e ok…

4

In loc de

<router-view name="companiesIndex">

nu cumva voiai sa ai <router-link>?

5

La fel… :frowning:
[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the “name” option.
(found in )

6

< router-view > in companies index

1 Like
7

Ma poate ajuta cineva cu eroarea? Chiar nu mai stiu ce sa-i fac…

8

Habar nu am de Vue, dar e ce apare acel tag router-view, de 2 ori?
Poate este nevoie sa il scrii o singura data.

9

Tot nu merge… Am refacut totul, se selecteaza din baza de date informatiile din tabel (daca sunt), ar fi cineva dispus sa-i trimit proiectul sa-mi faca doar un exemplu dupa care ma ocup eu de tot?
De azi dimineata nu resuesc deloc sa rezolv.

10

Presupun ca ai div cu id app. Ce erori ai in terminal si in dev tools? Ce folosesti pt screen sharing?

11

Am luat acest script pentru a imi face o idee despre cum functioneaza si sa-l fac si pe al meu, insa nici acesta nu merge. (Baza de date este conectata/am urmat toti pasii, s-a instalat tot (composer.etc))
Script: https://github.com/avinashn/vue-js-crud-laravel

v
v1357×89 5.46 KB

Imi apare tot ce trebuie, dar nu merg butoanele (ADD)…

12

Link-ul: http://localhost/Crud/public/js/app.js functioneaza, ma trimite in app.js TEXT. Nu stiu ce ar putea fi…

13

In loc de const app = new Vue({ router }).$mount('#app') incearca const app = new Vue({ el: '#app', router })

si adauga id="app" la div-ul cu clasa “container”

14

La fel…

Error: Request failed with status code 404 app.js:13822:15
Source map error: Error: request failed with status 404
Resource URL: http://localhost/Crud/public/js/app.js
Source Map URL: bootstrap.js.map

:pensive:

15

Pot sa fac pariu ca daca-l instalezi pe un host ceva, direct in root, o sa-ti mearga perfect.
Ai probleme cu paths.

Si ca sa-l faci sa mearga, in folderul root al aplicatiei dai un:

php artisan serve

Si te conectezi cu http://localhost:8000/


PS: Nu mai schimba path-urile aiurea prin aplicatie gen:

Resource URL: http://localhost/Crud/public/js/app.js

Lasa-le cum au fost initial.

image
image1224×536 41.9 KB

1 Like
17

Mii de multumiri!!
E posibil ca eroarea " [Vue warn]: Unknown custom element: < router-view > - did you register the component correctly? For recursive components, make sure to provide the “name” option.
(found in )" tot din aceasta cauza sa fie?
Multumesc inca odata, apreciez.

18

Ca sa-mi dau seama ce faci acolo, imi trebuie tot proiectul tau, inclusiv baza de date.
Cu franturi de cod, n-am cum sa te ajut, mai ales ca nu am avut tangente cu Vue.js.

1 Like
19

Am rezolvat cu ajutorul primului tau post, e ok acum.

1 Like