0

tengo un problema con laravel y vuejs, el cual es que no me aparece lo que tengo en el ARCHIVO.VUE estoy recién empezando a usar vue lo cual me parece genial, pero tengo dicho problema, nose si uds lo podrán ver, cree todo como se hace normalmente, adjuntare las imágenes y código, desde ya gracias!

ERROR

index_inventario.blade.php

@extends('layouts.app')
@section('content')
<div class="container">
        <inventario-component />
</div>
@endsection

inventariotable.vue

<template>
    <div class="container">
        <h1>NUEVA 1</h1>
        <div class="row justify-content-center">
            <h2>NUEVA </h2>
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">Example Component</div>

                    <div class="card-body">
                        I'm an example component.
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

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

APP.JS

require('./bootstrap');

window.Vue = require('vue');

Vue.component('inventario-component', require('./components/inventariotable.vue').default);
Vue.component('notas-component', require('./components/NotasComponent.vue').default);

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

5
  • 1
    Creo que está en la forma en la que llamas a tu archivo Vue. Debería ser: InventarioComponent.vue. Estoy seguro que si usas notas-component, sí te servirá este. Los componentes de Vue tiene una "regla" para llamarse e invocarse dentro de los archivos. Vue entiende que si usas PascalCase, este se transformará en un componente llamado pascal-case. Puedes ver más acá
    – gaidyjg
    Commented el 16 abr. 2021 a las 21:06
  • si lo lei, lo intente de ambas formas pero aun nada, cambie el nombre a InventarioComponent.vue al igualmente la sentencia para llamar, pero aun asi nada...:c Commented el 16 abr. 2021 a las 22:28
  • estaba viendo un tutorial y me menciono colocar esto <script src="{{asset('js/app.js')}}"></script> y me funciono si me lo podrias explicar seria ideal ya que en el tutorial no decia por que jaja Commented el 16 abr. 2021 a las 22:45
  • 1
    Bueno, al final fue algo más sencillo. Claro. Ese script es el que busca y crea el punto de montaje dentro tu archivo blade en laravel, sin eso, Vuejs nunca reconocerá dónde está su punto de montaje y qué componente debes renderizar. Imagina que es como el cdn de jQuery. Si no lo usas correctamente, nunca podrás usar las funcionalidades del mismo. En Vuejs es más o menos lo mismo.
    – gaidyjg
    Commented el 16 abr. 2021 a las 23:06
  • 2
    @MatiasMuñoz por eso siempre es altamente recomendable mirar la doc. oficial, checa el párrafo que inicia con: By default, the Laravel webpack.mix.js file compiles .....................
    – user128299
    Commented el 17 abr. 2021 a las 0:29

1 respuesta 1

0

la sintaxis de autocerrado de etiquetas es de uso del vue compiler

<inventario-component />

para que blade interprete el script que genera vue debes tener la correcta apertura del elemento, puedes reemplazar tu componente así

@extends('layouts.app')
@section('content')
<div class="container">
   <inventario-component > <inventario-component />
</div>
@endsection
1
  • si lo había realizado cómo comentaste pero no me sirvió, lo único que realmente me ayudo fue la linea de código que agregue en el .vue, que fue "<script src="{{asset('js/app.js')}}"></script>" Commented el 17 abr. 2021 a las 23:27

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.