Сергей delphinpro

В любой непонятной ситуации ВСЕГДА сначала читай документацию.
Особенно такую хорошую, как у вью.
Вот этот раздел, до просветления: https://router.vuejs.org/ru/guide/essentials/histo...

File chooser dialog can only be shown with a user activation

Вам черным по белому пишут, что это окно открывается только действием пользователя.
Зачем задавать вопрос, ответ на который у вас уже есть?

писал статью на тему 404 в vue
не претендую на истину, но работает отлично
https://habr.com/ru/post/523078/

A plugin must either be a function or an object with an "install" function

Сейчас средства перевода довольно хорошо развиты, но давайте я вам переведу:

Плагин должен быть функцией, или объектом, содержащим метод install()

В use нужно подсовывать то, что вы импортируете из 'vue-router'

Т.е.

import Router from 'vue-router'
Vue.use(Router)

Отправить все запросы на один контроллер
Route::fallback('IndexController@index');
Понятно, что в этом случае у вас не будет ответов 404 по любым запросам.

Если в ваше сборке есть карты исходников (sourcemaps), то вы, как минимум, можете вручную восстановить свои исходники. Для этого открывайте страницу в браузере, переходите на вкладку source и там ищите.
Если сорсмапов нет, то только по памяти.

VueJS: где лучше хранить css, в компонентах .vue или main.css?

отдельный роут на получение пользователя.
т.е. аутентификация, потом запрос данных. данные в localStorage. не забываем, что этим данным впоследствии особо доверять нельзя, и при операциях нужно проверять их валидность на бэке.

Совет простой — учитесь.
Всё очень сумбурно, ничего непонятно. Как устроено, как настроено...
Можно включить режим гадалки. Кто-то так и сделает и будет давать советы. Может они вас наведут в нужное русло...

Давайте сначала.
Что такое "headless-cms"? по сути это cms в режиме API. Получает запрос, отдает голые данные. Чаще всего в формате json.

Что из этого следует?
Это значит у вас два приложения. Серверная часть на cms. И клиентская на vue.
Первая работает на php, вторая на nodejs.

Значит вы на своем сервере (машине) должны поднять два сервера (программных). Один будет обрабатывать запросы к данным (API/cms), другой висеть на 80 дефолтном порту (ваш фронт на VUE) и брать данные из первого.

Что касается nuxt, то он может работать в режимах SSR и без него. Если без, то все сводится к тому, чтобы скопировать ваш index.html из билда в основной шаблон CMS. Если с SSR, то придется поднимать доп. nodejs сервер и разруливать запросы nginx'oм. 80-й порт на nodejs, кастомный - на php cms.

Потому что у вас сервер не настроен
Нужно перенаправить все запросы в корень (на /)

Да не стоит заморачиваться разделением компонентов на отдельные файлы.
Собирайте один бандл. По крайней мере пока он меньше 200-300kb точно не стоит.
Потом можно использовать встроенный в webpack code splitter/ Например через magiс comments

Сами компоненты я монтирую так

<div id="calculator"></div>

export function mountVueComponent(targetId, component) {
    if (document.getElementById(targetId)) {
        new (Vue.extend(component))().$mount(`#${targetId}`);
    }
}

import Calculator from '....';
mountVueComponent('calculator', Calculator);

Или так

<div class="mini-calc"></div>

Array.from(document.querySelectorAll('.mini-calc')).forEach(el => {
    let yandexGoal = el.dataset['goal'];
    new Vue({
        el    : el,
        render: createElement => createElement(Calculator, {
            props: {
                displayAs: CALC_DISPLAY_AS_MINI,
                yandexGoal,
            },
        }),
    });
});

Сделать два роута вообще не вариант? И почему?

/profile/:username
/post/:slug

Мрак..
Почему не вынести массивы в data, сделать вычисляемое поле и нормально использовать в цикле?

оффтоп, но зачем вообще какой-то шаблонизатор подключать в vue, когда он сам себе уже шаблонизатор?