After diving into Laravel and Vue, I managed to put together a navigation component as well as an article component.
The problem I'm facing is that although my navigation vue component is visible, the article component seems to be missing.
Reviewing my code:
app.js
require("./bootstrap");
window.Vue = require("vue");
/**
* The following block of code has the purpose of automatically registering your
* Vue components. By recursively scanning this directory for the Vue
* components, it automatically registers 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
Despite successfully compiling everything using npm run watch, only the navigation appears, not the articles component. I have even tried restarting the server.
--
Below are the details for 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>