I'm new to Laravel and Vue, I've created a navigation component and an article component.
I believe I've setup Vue correctly, the issue is that my navigation vue component is showing but not my article component.
Here is my code:
app.js
require("./bootstrap");
window.Vue = require("vue");
/**
* The following block of code may be used to automatically register your
* Vue components. It will recursively scan this directory for the Vue
* components and automatically register them with their "basename".
*
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
*/
const files = require.context("./", true, /\.vue$/i);
files.keys().map(key =>
Vue.component(
key
.split("/")
.pop()
.split(".")[0],
files(key).default
)
);
const app = new Vue({
el: "#app"
});
app.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Styles -->
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet">
</head>
<body>
<div id="app">
<navigation />
<main class="container">
@yield('content')
</main>
</div>
<!-- Scripts -->
<script src="{{ asset('js/app.js') }}" defer></script>
</body>
</html>
welcome.blade.php
@extends('layouts.app')
@section('content')
<articles></articles>
@endsection
My navigation is showing but not my articles component, everything is compiling successfully npm run watch, I have also restarted the server.
--
Here are the vue components:
Navigation.vue
<template>
<nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6">
<div class="flex items-center flex-shrink-0 text-white mr-6">
<svg
class="fill-current h-8 w-8 mr-2"
width="54"
height="54"
viewBox="0 0 54 54"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"
/>
</svg>
<span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
</div>
<div class="block lg:hidden">
<button
class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white"
>
<svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<title>Menu</title>
<path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z" />
</svg>
</button>
</div>
<div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
<div class="text-sm lg:flex-grow">
<a
href="#responsive-header"
class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4"
>Docs</a>
<a
href="#responsive-header"
class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4"
>Examples</a>
<a
href="#responsive-header"
class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white"
>Blog</a>
</div>
<div>
<a
href="#"
class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0"
>Download</a>
</div>
</div>
</nav>
</template>
Article.vue
<template>
<div>
<h1>Articles</h1>
</div>
</template>
<script>
export default {
data() {
return {
articles: [],
article: {
id: "",
title: "",
body: ""
},
article_id: "",
pagination: {},
edit: false
};
},
created() {
this.fetchArticles();
},
methods: {
fetchArticles() {
fetch("api/articles")
.then(res => res.json())
.then(res => {
console.log(res.data);
});
}
}
};
</script>
resources/js/componentsfolder - debugabug