Vue - pytania

Cześć,

Zacząłem się uczyć Vue i mam parę pytań.
Z Vue korzystam w Laravelu i mam plik app.js.

I w tym pliku deklaruje sobie komponenty:

Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('auth-login', require('./components/Auth/Login.vue').default);

I na końcu przypisuje vue do id app.

const app = new Vue({
    el: '#app',
});

I teraz moje pytanie:
Jak dokładnie się robi stronki w vue?
Gdy stworzę sobie np. podstrony w Laravelu takie jak Wyszukiwarka, dodawanie posta, edycja czegoś tam
to w każdym pliku xxx.blade.php mam tworzyć diva o id app i w nim wywoływać komponenty wcześniej zadeklarowane? W sensie chodzi mi o to czy takich instancji z vue przypisanym do danego id tworzy się więcej czy tylko jedno. I jeszcze co do komponentów - dlaczego wszystkie komponenty muszą mieć na końcu default?

Nie korzystałem z laravela.

Co do vue to najlepiej wygeneruj sobie projekt za pomocą Vue Cli.
Potraktuj Vue jako stronę do robienia SPA. Buduj ją tak jak potrzebujesz a kiedy już potrzebujesz coś z backendu to wykorzystaj axiosa aby pobrać dane z php.

Nie potrzebujesz importować komponentów w ten sposób. Tutaj masz prosty przykład jak jak w komponencie home, korzystam z komponentu HomeBorad

<template>
  <div class="home">
    <HomeBoard></HomeBoard>
  </div>
</template>

<script>
  import HomeBoard from "../components/HomeBoard";

export default {
  name: "Home",
  components: {
    HomeBoard
  }
};
</script>

Dzięki za zainteresowanie i odpowiedź, ale jednak nie usatysfakcjonowała mnie ona zbytnio. Na pewno chcę zostać przy Laravelu i nie tworzyć Vue jako osobnej aplikacji. Generalnie Laravel + Vue to ponoć taki super duet, ale jednak mi się rzucają w oczy same utrudnienia.

Np. weźmy na początek generowanie linków do stron.
**1) ** W szablonach blade, aby wygenerować link do danej akcji w kontrolerze, wystarczy wywołać {{ route('nazwa') }}. W komponentach Vue to już nie działa. Mogę jednak to przekazać jako parametr. Coś w stylu:

<nowy-komponent :routeToNazwa="{{ route('nazwa') }} />"

Czy to jest jedyny i prawidłowy sposób?

2) Wyświetlanie errorów z Laravela. Czy korzystając z Vue trzeba wyzbyć się wyświetlania błędów przez :

@error('email')

**3) ** Czy w finalnym pliku app.js w /public/js to normalne, że znajdują się wszystkie komponenty, zamiast tego jednego który jest wykorzystywany na aktualnej stronie? Jeśli nie - jak to zmienić, aby do jednej strony ładowały się tylko wykorzystywane komponenty.

**4) ** Ponawiam pytanie. Dlaczego rejestracja komponentów wymaga, aby każdy był domyślny? Gdy usunę końcówkę .default to wywoływany komponent się nie wyświetla.

Vue.component('example-component', require('./components/ExampleComponent.vue').default);
Vue.component('test', require('./components/Test.vue').default);

**5) ** Korzystając z Vue porzuca się całkiem szablony Blade? W sensie nie ma z nich żądnych korzyści i służą tylko do wstawiania komponentów Vue?

6) Jeśli chciałbym stworzyć jakiś rozbudowany dashboard + wiele innych stronek - czy przyda mi się vue router? Nie rozumiem tego do końca. Bo przecież trasy deklaruje się w Laravelu w routes/web.php.

**7) ** Czy treści statyczne tworzyć w blade bez Vue czy wszystko niezależnie czy vue jest potrzebny czy nie, wkładać do komponentów? I tworząc wszystko w Vue - w pliku CSS dla całej strony trzymać tylko jakieś globalne klasy, a resztę tylko w komponentach vue?

**8) ** Tworząc aplikację tylko dla siebie - muszę tworzyć api? W sensie czy takie apki robi się na zasadzie, że "normalne" kontrolery służa tylko do wyświetlania widoku, a api kontrolery zajmują się całą resztą i dane pobiera się przez Vue? Do tej pory nie korzystałem z api i generowałem widoki wraz z danymi. Czy to jest poprawne?

Proszę o jakieś wskazówki i odpowiedzi na moje pytania. Jak ktoś się chce podzielić czymś jeszcze to z chęcią posłucham.

1. Routing vue i laravela to dwie nachodzące na siebie rzeczy, gdzie pierwszej powinieneś użyć budując niezależny od siebie frontend i backend (komunikacja po api), a drugiej, tak jak to "super duet" realizuje, czyli kod vue dołączany do szablonów blade/twiga, którym możesz nadać trochę responsywności podstronom.
2. Zależy w jaki sposób przesyłasz formularze. Jeśli wysyłasz ajaxem to otrzymaną odpowiedź od serwera wyświetlasz za pomocą vue, a jeśli przesłanie formularza przeładowuje stronę, to pokazujesz w blade
3. takie i inne fajności realizuje webpack (google: laravel mix)

Najlepiej przejrzyj sobie kod tego forum https://github.com/adam-boduch/coyote
Tutaj masz link do odseparowanego frontu https://developer.okta.com/blog/2019/01/15/crud-app-laravel-vue