Failed to resolve import "@inertia/inertia" from "resources\js\Pages\Dashboard.vue"

Question

I've created a Laravel app, and then added Inertia and Vue using Laravel Breeze. Everything was running well until I writted this: import { Inertia } from '@inertia/inertia'

In my AppName\\resources\\js\\Pages\\Dashboard.vue. Then, strangely, when I opened the browser in the dashboard I got this Vite error:

[plugin:vite:import-analysis] Failed to resolve import "@inertia/inertia" from "resources\js\Pages\Dashboard.vue". Does the file exist?

Here is my package.json:

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "@inertiajs/vue3": "^1.0.0",
        "@tailwindcss/forms": "^0.5.3",
        "@vitejs/plugin-vue": "^4.0.0",
        "autoprefixer": "^10.4.12",
        "axios": "^1.1.2",
        "laravel-vite-plugin": "^0.7.2",
        "lodash": "^4.17.19",
        "postcss": "^8.4.18",
        "tailwindcss": "^3.2.1",
        "vite": "^4.0.0",
        "vue": "^3.2.41"
    },
    "dependencies": {
        "moment": "^2.29.4"
    }
}

The documentation is pretty self explanatory: inertiajs.com/upgrade-guide#new-dependencies. It says you must use import { router } from '@inertiajs/vue3'. — matiaslauriti
– matiaslauriti, Commented Feb 22, 2023 at 18:39

Mahdi Moazeni Artisan · Accepted Answer · 2023-04-11 23:29:41Z

Use import { router } from '@inertiajs/vue3' instead of import { Inertia } from '@inertia/inertia'

Change

import { Inertia } from '@inertia/inertia'

To

import { router } from '@inertiajs/vue3'

Now!You can use router.get() or router.post() instance of Inertia.get() or Inertia.post() and ...

For better understanding and how to use router instead of Inertia, I will give a simple example.

In this example, everything we write in the search input is going to send to the users' page by the get method here!

<template>
    <div>
        <input type="text" v-model="search" id="&quot;form-subscribe-Filter" placeholder="Search..."
    class=" rounded-lg border-transparent flex-1 appearance-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent" />
    </div>
</template>

<script setup>
  import {ref,watch} from 'vue'
  import { router } from '@inertiajs/vue3'

    let search=ref('');

    watch(search,(value)=>{
        // console.log('Changed:'+value)
        router.get('/users',{search:value},{
            preserveState:true,
            replace:true    
        });
    })
</script>

Instance of '/users',You can put the route of your desired page

Amirmasoud · Accepted Answer · 2023-05-03 10:09:55Z

0

Switch from

import { Inertia } from '@inertiajs/inertia'

to

import { router } from '@inertiajs/vue3'

edited May 3, 2023 at 10:09

Amirmasoud

6784 gold badges15 silver badges28 bronze badges

answered May 1, 2023 at 12:44

Steve Muambi

11 bronze badge

Collectives™ on Stack Overflow

Failed to resolve import "@inertia/inertia" from "resources\js\Pages\Dashboard.vue"

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related