Structure my Vue Components

@ngozistephen please format your code properly by wrapping code within triple backticks:

```
import { createApp } from 'vue'; 
// etc
```

I tried cleaning up a bit, it is not clear what issue you are having:

app.js

import './bootstrap';
import {createApp} from 'vue';
import router from './router';
import App from './App.vue';
import HeaderArea from './components/HeaderArea.vue';

const app = createApp({});
app.component('app', App);
app.component('header-area', HeaderArea);

app.use(router);
app.mount('#app');

router.js

import {createRouter, createWebHistory} from 'vue-router';
import LandingPage from './components/Auth/LandingPage.vue';
import RegisterPage from './components/Auth/RegisterPage.vue';
import LoginPage from './components/Auth/LoginPage.vue';
import AdminDashboard from './components/AdminDashboard.vue';

createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: '/',
            name: 'landing',
            component: LandingPage,
        },
        {
            path: '/register',
            name: 'Register',
            component: RegisterPage,
        },
        {
            path: '/login',
            name: 'Login',
            component: LoginPage,
        },
        {
            path: '/dashboard',
            name: 'Dashboard',
            component: AdminDashboard,
        },
    ]
});

export default router;

Also, next time wrap your code sample inside lines with either 3 tildes ( ~ ) or 3 backticks ( ` )

~~~
code goes here
~~~

or

```
code goes here
```