javascript - Laravel + Inertia + Vue: Cant import Components while using <script setup>

tl;dr: Can'T import while using <script setup>.

I have a table on a page, which becomes a part of the AppLayout (navigation etc.) via navigation. I need to import this AppLayout.vue next to other components like a button.

But I also want to map data from my database into the table, so I created a route and a controller for this:

Route::get('/articles', [\App\Http\Controllers\ArticleController::class, 'index']);

From this controller the data is sent to the component that contains the table:

class ArticleController extends Controller

{
    public function index()
    {
        $articles = Article::all();

        return inertia('Articles/Index', compact('articles'));
    }
}

If I want to receive this data there as props, I use

<script setup>
import AppLayout from '@/Layouts/AppLayout.vue';    
import JetButton from '@/Jetstream/Button.vue';

export default {
props: {
    articles: Object
    }
}

unfortunately, when I use this code, I can't fall back to <script setup>. If I remove the setup - to make the data exchange work, I can't use an import command.

I get, with setup the following message:

<script setup> cannot contain ES module exports.

and without setup the imports are ignored and even removed by PHP-Storm directly from the code.

Do I have to use required?
How to get the props wuthour export default (defineProps()?)?
How can pass props while using <script setup>?

Answer

Solution:

I solved it by myself. There was a mistake in web.php.

There is only one route needed and I forgot ->name('articles') to register in routeslist.

Route::get('/articles', [\App\Http\Controllers\ArticleController::class, 'index'])->name('articles');

and the setup with imports looks like this:

<script setup>
import AppLayout from '@/Layouts/AppLayout.vue';
import JetButton from '@/Jetstream/Button.vue';    

const props = defineProps({
    articles: Object
})
</script>

Source