I have a simple Laravel web site with à limited number of products (actually 15 smartphones) to display and there is no pagination needed. In the home page of the web site, ALL the products are automatically displayed.
My problem is that i would like the user can filter those data with à range filter on price, OS and more... So how can i use Vue js to filter data already returned from the database with Laravel Query builder by keeping SEO in mind ?
If your products are in the form of an array of objects, as a Laravel collection would be when serialised to JSON you can use a library like collect.js to filter your products in the same way as you would with Laravel collections.
The library is based off of Laravel collections actually has a near identical API, so you'll immediately be familiar with the available methods.
An example for your use case may be to filter e.g. OS:
import collect from 'collect.js';
return collect(products).where('os', 'Android').items;
A full listing of all of the available methods can be found on the project's GitHub README.
var products = {!! json_encode($products) !!}. This will then be accessible in Vue, which you should use to re-render out the products once filtered, e.g. overwriting your rendered products which are output by Laravel. For SEO you won't want to filter anyway, so long as search engines can retrieve all products without needing JavaScript your site will be indexable.ul which you render products into on page load with laravel, put that within a noscript tag so that it's only used if a browser doesn't run JavaScript, and then follow that with the list rendered by Vue using e.g. v-for syntax. This way the full product listing is rendered for search engines, and other browsers will render the content on page load by Vue which is based on your products variable. When the user filters their selection Vue will re-render the products accordingly.