Vue 3 not Rendering template

I have the following file structure:

OmdbSearch.vue:

<template>
Hellooooo
</template>

index.js:

import { createRouter, createWebHistory } from "vue-router";

import OmdbSearch from '../components/omdb/OmdbSearch.vue'

const routes = [
    {
        path: '/',
        name: 'omdb.search',
        component: OmdbSearch
    }
]

export default createRouter({
    history: createWebHistory(),
    routes
})

app.js:

require('./bootstrap');
require('alpinejs');

import { createApp } from "vue";
import router from './router'
import OmdbSearch from './components/omdb/OmdbSearch.vue'


createApp({
    components:{
        OmdbSearch
    }

}).use(router).mount('#app_omdb')

views/layouts/app.blade.php:

@Sergiu17 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">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">

        <!-- Styles -->
        <link rel="stylesheet" href="{{ asset('css/app.css') }}">

        <!-- Scripts -->
        <script src="{{ asset('js/app.js') }}" defer></script>
    </head>
    <body class="font-sans antialiased">
        <div class="min-h-screen bg-gray-100" id="app_omdb">
            @include('layouts.navigation')

            <!-- Page Heading -->
            <header class="bg-white shadow">
                <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
                    {{ $header }}
                </div>

            </header>

            <!-- Page Content -->
            <main>
                {{ $slot }}
            </main>
        </div>
    </body>
</html>

welcome.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        .....
    </head>
    <body class="antialiased">
    <router-view />
    </body>
</html>

web:

Route::get('/', function () {
    return view('welcome');
});

I run the command npm run dev but it doesn't render me the content of the template. I get the following result:

I don't understand why it doesn't render it to me?

Sergiu17

4 years ago

Level 60

I can't see your html element with #app_omdb

<main id="app_omdb">

gianmarx

4 years ago

Level 1

@Sergiu17 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">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">

        <!-- Styles -->
        <link rel="stylesheet" href="{{ asset('css/app.css') }}">

        <!-- Scripts -->
        <script src="{{ asset('js/app.js') }}" defer></script>
    </head>
    <body class="font-sans antialiased">
        <div class="min-h-screen bg-gray-100" id="app_omdb">
            @include('layouts.navigation')

            <!-- Page Heading -->
            <header class="bg-white shadow">
                <div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
                    {{ $header }}
                </div>

            </header>

            <!-- Page Content -->
            <main>
                {{ $slot }}
            </main>
        </div>
    </body>
</html>

gianmarx

4 years ago

Level 1

in app.blade.php i put id

@sergiu17 but not render

Please or to participate in this conversation.