0

I am new to VueJS.

Let's assume that I plan to create an extensive application. And for example I have 3 separate pages: mypage.com/account, mypage.com/players, mypage.com/orders. Each page has its own controller and in it I return a file with a view (account.blade.php etc.) and pass parameters in variables. Then in each of them I would like to use Vue. And here I have a few questions:

1) Do I need to create separate app.js files for each page with a Vue instance in the / resources / js / folder? Something like:

app-account.js

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

app-players.js

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

etc.?

If not - how to do it? Declare all components in one app.js file? And is this correct? Because then when you enter mypage.com/account in the app.js file in / public / js / all other Vue components are stored. So the actual component is displayed on the page and all components are downloaded on the page.

2) Why does every component have to be the default?

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

3) How to use Laravel + Vue correctly when you do not want the site to be SPA?

4) Is it correct that all data is transmitted along with the view? Is it better to create controllers only for displaying the view and download data via Vue from api?

5) What about the features from the Blade template system?

I could display a link to the route in them via {{route ('name')}}. The only way to achieve this in Vue is to pass a parameter to the component? Is this the correct way?

<example-component routeToXXX="{{route ('name')}}" />
Improve this question

1 Answer 1

Reset to default
1

Welcome to Vue world.

  1. Since Laravel/PHP at navigation between pages leads browser to rerender DOM, its your choice if you separate app files or just write inline js wrapped with <script> (if you do that ensure vuejs is loaded before your script/defered). In case you want to keep Laravel your core, you may also consider diving into livewire, alternatively you have to explore what the world is trying like: VUE2 component register in Laravel

  2. It's a Javacsript syntax, basically SFC (Single File Components) are supposed to export JS data/object/functions which can be used or loaded, Vue has a clear documentation, try it. Learning Vue, makes you learn JS (suggestion: consider learning the basics, start by understanding difference between sync, async, loops, data types, functions, function functions).

  3. There's no concrete way that you have to follow in order to achieve what you need or accomplish certain task. In any case if your needs are met by your solution at your stage of career, that might be the correct way. Just keep trying and outcome your abilities by time (reviewing other's code/libraries helps).

  4. This is matter of choice, SSR (ServerSideRendering) is commonly used in cases you do not want to expose the logic in the frontend or have security concerns. There are also scenarios where you perform API calls to enhance overall performance like pagination or filters. However your data publicity/privacy always depends on how you authenticate users, each API call must ask for a valid access token that will ensure the backend, that credentials are met to reach the data. With experience in frontend you'll be convinced which are the best practices.

  5. Laravel has a blade helper to ignore templating engine (@verbatim,@endverbatim and others). Passing data to your Vue part if its inline script you may open php tags like within your @verbatim section. In other cases if you already know what you are about to pass your JS, you can define a global variable somewhere in between your blade view like <script> var globalVar = { url1: "<?= route('name'); ?>", url2: "<?= route('name2'); ?>" } </script> or you can echo out encoded json so it renders the JS variable like var globalVar = <?= json_encode($yourVariable); ?>;

Finally PHP and JS are both two different worlds, aiming towards a similar syntax. It's a big decision to consider loose coupling API and View logic, but it might pay well in long term.

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.