In this lesson, we’ll learn about two different things. First, we’ll learn how to register a global component within our Vue 3 Inertia application. Since links are fairly common in any application we’ll be taking the Inertia Link component and registering it globally.

Then, we’ll learn how we can simplify our imports using Webpack Encore and path aliases. This will allow us to use a single reference point when importing client-side files inside our Vue 3 application instead of relying on relative paths.

Global Components

In order to register a global component, we’ll want to jump inside our client-side app.js file at resources/js/app.js. At the top of the file let’s add our import, in this case we’ll import the Inertia Link component as shown below.

import '../css/app.css'
import { createApp, h } from 'vue'
import { createInertiaApp } from '@inertiajs/inertia-vue3'
import DefaultLayout from './Layouts/Default.vue'
import { Link } from '@inertiajs/inertia-vue3' // 👈 import the Link component

createInertiaApp({ ... })

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

If you recall back to a few lessons ago, you’ll remember createApp and the methods chained off of it are the portions of the below actually creating our Vue 3 application, everything else is Inertia-based.

So, all we need to do to register a global Vue 3 component is chain off the createApp function the component method. Just note, you’ll want to call component before mount is called.

import { Link } from '@inertiajs/inertia-vue3'

createInertiaApp({
  resolve: name => { ... },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .component('inertia-link', Link) // 👈
      .mount(el)
  },
})

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

The first argument of the component method is the name the component will be registered to. The second argument is for the component itself. Once that’s set, the component is now globally registered and we can now replace all our links with our globally registered inertia-link component.

Using Our Global InertiaLink Component

First, let’s jump into our home page and update the Link component there to our globally registered inertia-link.

<template>
  <!-- resources/js/Pages/Home.vue -->
  <div>
    <!-- <Link href="/login">Login</Link> -->
    <inertia-link href="/login">Login</inertia-link>
    <h1 class="text-red-500">Testing, {{ testing }}</h1>
    <n-button>Testing</n-button>
    <n-input :value="testing"></n-input>
  </div>
</template>

<script>
  // import { Link } from '@inertiajs/inertia-vue3'
  export default {
    props: {
      testing: String
    },
    // components: {
    //   Link,
    // }
  }
</script>

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

As you can see above, all we need to do is remove our Link import and component registration from our component. Then swap it out within the template with our inertia-link component.

Let’s do the same on our Login page.

<template>
  <!-- resources/js/Pages/Auth/Login.vue -->
  <div>
    <!-- <Link href="/home">Home</Link> -->
    <inertia-link href="/home">Home</inertia-link>
    <label>Login</label>
    <a href="/home">Anchor Home</a>
  </div>
</template>

<script>
  import AuthLayout from '../../Layouts/Auth.vue'
  export default {
    layout: AuthLayout
  }
</script>

<!-- 
  <script setup>
    import { Link } from '@inertiajs/inertia-vue3'
  </script>
>

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

In this case, since we’re using a setup script with nothing else going on, we can just remove the setup script and swap out the component in the template.

Simplifying Imports with Path Aliases

Next, let’s get our path alias set up so that we don’t need to rely on relative paths to import components, but instead can reference our alias.

For example an import like this:

import AuthLayout from '../../Layouts/Auth.vue'

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

Can be simplified to the below using a path alias.

import AuthLayout from '@/Layouts/Auth.vue'

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

This has a couple of benefits.

1. First, when we go to import a file, we won’t need to stop and think about the depth level we’re currently in nor the depth level the component we need is in.

2. Second, if we were to copy/paste the import using the relative path we’d need to update the path if our nested level changed at all in comparison to the imported file. Using a path alias we can copy/paste without needing to update our path regardless of where we paste the import too.

Add the Path Alias

First things first, if you have your server running, go ahead and stop it as we’ll need to update our webpack.config.js to add the alias. Then, go ahead and open your webpack.config.js file.

At the top, go ahead and add an import for resolve from the path package.

const { join, resolve } = require('path') // 👈 add import for resolve
const Encore = require('@symfony/webpack-encore')
const Components = require('unplugin-vue-components/webpack')
const { NaiveUiResolver } = require('unplugin-vue-components/resolvers')

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

Then, scroll on down to where we have our Vue Loader config, around line 186. Here we’ll add our alias using the Encore.addAliases method.

Encore.enableVueLoader(() => {}, {
  version: 3,
  runtimeCompilerBuild: false,
  useJsx: false
})

Encore.addPlugin(Components({
  resolvers: [NaiveUiResolver()]
}))

// 👇
Encore.addAliases({
  '@': resolve(__dirname, 'resources/js')
})

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

This method accepts an object. The key of the object is the aliased character, which we’ll use '@' here. The second is the path we want this alias to reference. The best place for this will be our resources/js directory as this will allow us to reach for our pages, layouts, and components easily within our Vue application.

At this point, you can go ahead and restart your server if you wish.

Using Our Alias

Lastly, let’s go ahead and make use of our new alias! So, jump back into your Login page, and let’s replace the AuthLayout import from ../../Layouts/Auth.vue to @/Layouts/Auth.vue.

<template>
  <!-- resources/js/Pages/Auth/Login.vue -->
  <div>
    <inertia-link href="/home">Home</inertia-link>
    <label>Login</label>
    <a href="/home">Anchor Home</a>
  </div>
</template>

<script>
  import AuthLayout from '@/Layouts/Auth.vue' // 👈
  export default {
    layout: AuthLayout
  }
</script>

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

Cleaning Up Our Project

Before we end this project, let’s go ahead and do some cleanup within our application to get ready for the next set of lessons. Most of what we have in our project so far is testing to ensure everything is set up correctly, so let’s go ahead and clean all that out.

Let’s start by creating a header so we can easily navigate from page to page.

Creating Our Header

Let’s create it at resources/js/components/Header.vue

<template>
	<!-- resources/js/components/Header.vue -->
  <div class="bg-slate-100 py-3 px-6 flex justify-between items-center mb-6">
    <div class="flex items-center space-x-6">
      <h3 class="font-bold">AdonisJS InertiaJS Example</h3>
      <nav class="flex items-center text-sm">
        <inertia-link href="/app">Home</inertia-link>
      </nav>
    </div>

    <div class="flex items-center space-x-6 text-sm">
      <inertia-link href="/app/login">Login</inertia-link>
      <inertia-link href="/app/register">Register</inertia-link>
    </div>
  </div>
</template>

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

Here we have three inertia-link usages one for our home page, one for our login page, and a last for our register page that we’ll create a little later on. You may also notice all three href values are prefixed with /app.

Updating Our Routes

We’ll keep everything Inertia-based under the /app path prefix and everything Edge-based outside of /app. So, let’s jump into our routes and update it to the below.

Route.get('/', async ({ view }) => {
  return view.render('welcome')
})

Route.group(() => {

  Route.get('/', async ({ inertia }) => {
    return inertia.render('App', { 
      testing: 'this is a test'
    })
  })
  
  Route.get('/login', async ({ inertia }) => {
    return inertia.render('Auth/Login')
  })

  Route.get('/register', async ({ inertia }) => {
    return inertia.render('Auth/Register')
  })

}).prefix('app')

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  
start
routes.ts

We’re renaming home to app. You’ll also want to update the Home.vue filename to App.vue as well. Then, we’ll wrap our app, login, and register routes inside a group that’s prefixed with app. Lastly, we’re adding a route for our register route. We’ll make some changes to our login page in a moment, then copy/paste that file to create our register page.

Applying Our Header To Our Layouts

In addition to applying our header to our layouts, we’ll also replace the placeholder text we have stating what layout we’re in. Let’s also wrap our slotted content in a px-6 to match the padding within our header.

<template>
  <!-- resources/js/Layouts/Default.vue -->
  <div>
    <Header />
    <main class="px-6">
      <slot></slot>
    </main>
  </div>
</template>

<script setup>
  import Header from '@/components/Header.vue'
</script>

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

And the same for our AuthLayout. At this point our AuthLayout will match our DefaultLayout, but we’ll change that in one of the upcoming lessons so we’ll keep them separated.

<template>
  <!-- resources/js/Layouts/Auth.vue -->
  <div>
    <Header />
    <main class="px-6">
      <slot></slot>
    </main>
  </div>
</template>

<script setup>
  import Header from '@/components/Header.vue'
</script>

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

Cleaning Our Pages

Next, let’s clean out our pages of the “test” elements and components we’re using.

First our App page.

<template>
  <!-- resources/js/Pages/App.vue -->
  <div>
    <h1>Welcome</h1>
  </div>
</template>

<script>
  export default {
    props: {
      testing: String
    },
  }
</script>

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

Then, our Login page.

<template>
  <!-- resources/js/Pages/Auth/Login.vue -->
  <div>
    <h1>Login</h1>
  </div>
</template>

<script>
  import AuthLayout from '@/Layouts/Auth.vue'
  export default {
    layout: AuthLayout
  }
</script>

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

Lastly, let’s copy/paste our Login page and rename the pasted version to Register.vue to serve as our registration page. Then, update the h1 for that page to Register.

<template>
  <!-- resources/js/Pages/Auth/Register.vue -->
  <div>
    <h1>Register</h1>
  </div>
</template>

<script>
  import AuthLayout from '@/Layouts/Auth.vue'
  export default {
    layout: AuthLayout
  }
</script>

  

    

      Copied!
      

        

      
    
  
  
    
    
    
    
    
  

Next Up

That should do it for now! In the next lesson, we’ll build off the clean-up we just did by learning about Inertia and how forms work within it by working on our registration form.