Transitioning to Vue. Installed environment and restored homepage scene overview.

assets/js/api.js

@@ -0,0 +1,41 @@
+import config from 'config';
+
+async function get(endpoint, query = {}) {
+    const queryString = Object.entries(query).reduce((acc, [key, value], index) => `${acc}${index > 0 ? '&' : ''}${key}=${value}`, '?');
+
+    const res = await fetch(`${config.api.url}${endpoint}${queryString}`, {
+        method: 'GET',
+        mode: 'cors',
+        credentials: 'same-origin',
+    });
+
+    if (res.ok) {
+        return res.json();
+    }
+
+    const errorMsg = await res.text();
+
+    throw new Error(errorMsg);
+}
+
+async function post(endpoint, data) {
+    const res = await fetch(`${config.api.url}${endpoint}`, {
+        method: 'GET',
+        mode: 'cors',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        credentials: 'same-origin',
+        body: JSON.stringify(data),
+    });
+
+    if (res.ok) {
+        return res.json();
+    }
+
+    const errorMsg = await res.text();
+
+    throw new Error(errorMsg);
+}
+
+export { get, post };

assets/js/auth/actions.js

@@ -0,0 +1,3 @@
+function initAuthActions(_store, _router) {}
+
+export default initAuthActions;

assets/js/auth/auth.js

@@ -0,0 +1,13 @@
+import state from './state';
+import mutations from './mutations';
+import actions from './actions';
+
+function initAuthStore(store, router) {
+    return {
+        state,
+        mutations,
+        actions: actions(store, router),
+    };
+}
+
+export default initAuthStore;

assets/js/auth/mutations.js

@@ -0,0 +1 @@
+export default {};

assets/js/auth/state.js

@@ -0,0 +1,4 @@
+export default {
+    authenticated: false,
+    user: null,
+};

assets/js/config/default.js

@@ -0,0 +1,5 @@
+export default {
+    api: {
+        url: `${window.location.origin}/api`,
+    },
+};

assets/js/main.js

@@ -0,0 +1,30 @@
+import Vue from 'vue';
+import dayjs from 'dayjs';
+
+import router from './router';
+import initStore from './store';
+
+import '../css/style.scss';
+
+import Container from '../components/container/container.vue';
+
+function init() {
+    const store = initStore(router);
+
+    Vue.mixin({
+        methods: {
+            formatDate: (date, format) => dayjs(date).format(format),
+        },
+    });
+
+    new Vue({ // eslint-disable-line no-new
+        el: '#container',
+        store,
+        router,
+        render(createElement) {
+            return createElement(Container);
+        },
+    });
+}
+
+init();

assets/js/releases/actions.js

@@ -0,0 +1,15 @@
+import { get } from '../api';
+
+function initReleasesActions(_store, _router) {
+    async function fetchReleases({ _commit }, releaseId) {
+        const releases = await get(`/releases/${releaseId || ''}`);
+
+        return releases;
+    }
+
+    return {
+        fetchReleases,
+    };
+}
+
+export default initReleasesActions;

assets/js/releases/mutations.js

@@ -0,0 +1 @@
+export default {};

assets/js/releases/releases.js

@@ -0,0 +1,13 @@
+import state from './state';
+import mutations from './mutations';
+import actions from './actions';
+
+function initReleasesStore(store, router) {
+    return {
+        state,
+        mutations,
+        actions: actions(store, router),
+    };
+}
+
+export default initReleasesStore;

assets/js/releases/state.js

@@ -0,0 +1,4 @@
+export default {
+    authenticated: false,
+    user: null,
+};

assets/js/router.js

@@ -0,0 +1,39 @@
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+
+import Home from '../components/home/home.vue';
+import Release from '../components/release/release.vue';
+import Actor from '../components/actor/actor.vue';
+import NotFound from '../components/errors/not-found.vue';
+
+Vue.use(VueRouter);
+
+const routes = [
+    {
+        path: '/',
+        component: Home,
+    },
+    {
+        path: '/scene/:releaseId',
+        component: Release,
+    },
+    {
+        path: '/movie/:releaseId',
+        component: Release,
+    },
+    {
+        path: '/actor/:actorSlug',
+        component: Actor,
+    },
+    {
+        path: '*',
+        component: NotFound,
+    },
+];
+
+const router = new VueRouter({
+    mode: 'history',
+    routes,
+});
+
+export default router;

assets/js/store.js

@@ -0,0 +1,18 @@
+import Vue from 'vue';
+import Vuex from 'vuex';
+
+import initAuthStore from './auth/auth';
+import initReleasesStore from './releases/releases';
+
+function initStore(router) {
+    Vue.use(Vuex);
+
+    const store = new Vuex.Store();
+
+    store.registerModule('auth', initAuthStore(store, router));
+    store.registerModule('releases', initReleasesStore(store, router));
+
+    return store;
+}
+
+export default initStore;