Adocasts Adocasts
Adocasts Adocasts
Sign In Sign Up

Ready to get started?

Join Adocasts Plus for $8/mo, or sign into an existing Adocasts Plus account, to get access to all of our lessons.

Join for $8/mo Sign in
robot mascot smiling
Building with AdonisJS & Inertia

Creating A New Course

@tomgobich
Published by
@tomgobich
In This Lesson

We'll add the ability to create a new course within the active organization.

Chapters

00:00 - Creating the CourseActions Component
03:42 - Exposing Methods Outside of the CourseActions Component
06:30 - Using our CourseActions Component
06:59 - Testing the CourseActions Component
07:10 - Preloading Statuses, Access Levels, & Difficulties on the Org
07:56 - Course Store Validation
09:10 - The Store Course Action
10:31 - Courses Store Route Handler
11:21 - Defining the Courses Store Route
11:36 - Ordering the Org Preloads
11:56 - Testing & Debugging a NaN Error on our Course Store

Join the Discussion 4 comments

Share your thoughts!
Create a free account to join in on the discussion
  1. @gribbl
    @gribbl

    Hello,

    With useTemplateRef, I’m encountering type errors with TypeScript because the component is of type unknown. I also believe this issue is caused by unplugin-vue-components. All auto-imported components are of type unknown, and VSCode doesn’t provide IntelliSense for these components (e.g., their attributes). However, if I manually import the components, everything works fine. Is there a solution to fix this?

    1
    1. Responding to gribbl
      @tomgobich
      @tomgobich Adocasts Plus

      Hi gribbl!!

      So, I looked into this a little bit, and it seems like everything TypeScript related for these components that are auto-imported via unplugin-vue-components begins working if you add the generated components.d.ts file into the /intertia/tsconfig.json include array, like below.

      {
  "extends": "@adonisjs/tsconfig/tsconfig.client.json",
  "compilerOptions": {
    "baseUrl": ".",
    "jsx": "preserve",
    "module": "ESNext",
    "jsxImportSource": "vue",
    "paths": {
      "~/*": ["./*"],
    }
  },
  "include": ["./**/*.ts", "./**/*.vue", "../components.d.ts"]
}
      
  
      
    
      
      Copied!

      Here's the result:

      I'm going to go tack a note about this into lesson 1.4, where we setup unplugin-vue-components!

      1
      1. Responding to tomgobich
        @gribbl
        @gribbl

        Thank you. 👍

        1
        1. Responding to gribbl
          @tomgobich
          @tomgobich Adocasts Plus

          Anytime!! 😊

          0