CODEWITHSUNDEEP
laravelvuejs3laravel-10
Data Science
Data Science

Reputation: 55

Laravel vue3 router - component does not provide an export named

Hi I am trying to create a simple routing with Laravel 10 and vue.js version 3 (Options API)


What it should do: If I go to '/' it should display page1.vue and on '/secondpage'/ it should show me page2.vue.

What it does: I got on error

Uncaught SyntaxError: The requested module '/resources/js/components/page1.vue' does not provide an export named 'mainPage' (at index.js?t=1714561521244:2:10)

Hence I thin there is something wrong with the main.vue

resources/js/views/welcome.blade.php
In my welcome.blade.php I have my div with the id 'app'.

<body>
<div class="relative container mx-auto p-3">

    <nav class="bg-blue-50 flex items-center justify-between h-12">
        <!--  Flex container -->
        <!-- Menu Items -->
        <div class="ml-5 space-x-6">
            <a href="\" class="text-blue-500 hover:font-bold">HomePage</a>
            <a href="\secondpage" class="text-blue-500 hover:font-bold">SecPage</a>
        </div>
    </nav>


<div id="app"></div>

</div>

Here is my resources/js/app.js
It contains the id app and also the imports for my app.vue main component.

import "./bootstrap";
import { createApp } from "vue";

import App from "./components/app.vue";
import router from './router/index.js'

createApp(App).use(router).mount("#app");

My resources/js/router/index.js looks like:

import { createRouter, createWebHistory } from "vue-router"
import { mainPage } from '../components/page1.vue'
import { secondPage } from '../components/page2.vue'
import { notFound } from '../components/notFound.vue'

const routes = [
    {
        path: '/',
        component: mainPage
    },
    {
        path: '/secondpage',
        component: secondPage,
    },
    {
        path: '/:pathMatch(.*)*',
        component: notFound
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes
})

export default router

And resources/js/components/app.vue
where the components are rendered

<template>
    <router-view/>
</template>

And in my routes/web.php I defined routes

Route::get('/', function () {
    return view('welcome');
});
Route::get('/{pathMatch}', function () {
    return view('welcome');
})->where('patchMatch', ".*");

All my components are more or less empty (looks like page1.vue) and I think I have to add something here:

../components/page1.vue

<template>
<h1>
Hallo
</h1>
</template>

<script>

export default {
    name: "MainPage",
}
</script>

<style>

</style>

package.json

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@vitejs/plugin-vue": "^4.6.2",
        "autoprefixer": "^10.4.17",
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.2",
        "postcss": "^8.4.35",
        "tailwindcss": "^3.4.1",
        "tailwindcss-plugins": "^0.3.0",
        "vite": "^4.0.0",
        "vue": "^3.4.19",
        "vue-router": "^4.2.5"
    },
    "dependencies": {
        "@babel/plugin-proposal-class-properties": "^7.18.6",
        "babel-plugin-prismjs": "^2.1.0",
        "prism-themes": "^1.9.0",
        "prismjs": "^1.29.0",
        "save-dev": "^0.0.1-security",
        "vue-loader": "^17.3.1"
    }
}

composer.json

{
    "name": "laravel/laravel",
    "type": "project",
    "description": "The Laravel Framework.",
    "keywords": ["framework", "laravel"],
    "license": "MIT",
    "require": {
        "php": "^8.1",
        "guzzlehttp/guzzle": "^7.2",
        "laravel/framework": "^10.0",
        "laravel/sanctum": "^3.2",
        "laravel/tinker": "^2.8"
    },
    "require-dev": {
        "fakerphp/faker": "^1.9.1",
        "laravel/pint": "^1.0",
        "laravel/sail": "^1.18",
        "mockery/mockery": "^1.4.4",
        "nunomaduro/collision": "^7.0",
        "phpunit/phpunit": "^10.0",
        "spatie/laravel-ignition": "^2.0"
    },
    "autoload": {
        "psr-4": {
            "App\\": "app/",
            "Database\\Factories\\": "database/factories/",
            "Database\\Seeders\\": "database/seeders/"
        }
    },
    "autoload-dev": {
        "psr-4": {
            "Tests\\": "tests/"
        }
    },
    "scripts": {
        "post-autoload-dump": [
            "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump",
            "@php artisan package:discover --ansi"
        ],
        "post-update-cmd": [
            "@php artisan vendor:publish --tag=laravel-assets --ansi --force"
        ],
        "post-root-package-install": [
            "@php -r \"file_exists('.env') || copy('.env.example', '.env');\""
        ],
        "post-create-project-cmd": [
            "@php artisan key:generate --ansi"
        ]
    },
    "extra": {
        "branch-alias": {
            "dev-master": "10.x-dev"
        },
        "laravel": {
            "dont-discover": []
        }
    },
    "config": {
        "optimize-autoloader": true,
        "preferred-install": "dist",
        "sort-packages": true,
        "allow-plugins": {
            "pestphp/pest-plugin": true
        }
    },
    "minimum-stability": "stable",
    "prefer-stable": true
}

Upvotes: 0

Views: 76

Answers (1)

yoduh
yoduh

Reputation: 14639

The error is giving you the correct information. page1.vue does not provide a named export. It's a default export:

export default {
    name: "MainPage",
}

The name property here is not related to the export itself, but is the name property of the component.

To resolve the error you must use the correct syntax when importing a default export:

import mainPage from '../components/page1.vue'

The difference here being that it does not use brackets, { mainPage }.

For more information you can read the MDN documentation on imports and exports

Upvotes: 1

Related Questions