More of VueJS

.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead

.eslintrc.js

@@ -0,0 +1,20 @@
+module.exports = {
+    root: true,
+    env: {
+        node: true,
+    },
+    extends: [
+        "plugin:vue/essential",
+        "eslint:recommended",
+        "@vue/typescript/recommended",
+        "@vue/prettier",
+        "@vue/prettier/@typescript-eslint",
+    ],
+    parserOptions: {
+        ecmaVersion: 2020,
+    },
+    rules: {
+        "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+        "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    },
+};

assets/js/app.ts

@@ -1,14 +1,14 @@
-/*
- * Welcome to your app's main JavaScript file!
- *
- * We recommend including the built version of this JavaScript file
- * (and its CSS file) in your base layout (base.html.twig).
- */
+import Vue from "vue";
+import Buefy from "buefy";
+import "@/../css/app.scss";
+// import "buefy/dist/buefy.css";
+import App from "@/components/App.vue";
+import router from "@/router";
 
-// any CSS you import will output into a single css file (app.css in this case)
-import '../css/app.scss';
+Vue.config.productionTip = false;
+Vue.use(Buefy);
 
-// Need jQuery? Install it with "yarn add jquery", then uncomment to import it.
-// import $ from 'jquery';
-
-console.log('Hello Webpack Encore! Edit me in assets/js/app.js');
+new Vue({
+    router,
+    render: (h) => h(App),
+}).$mount("#app-root");

assets/js/components/App.vue

@@ -0,0 +1,13 @@
+<template>
+    <router-view></router-view>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import Component from 'vue-class-component'
+
+@Component
+export default class App extends Vue {
+
+}
+</script>

assets/js/pages/Home.vue

@@ -0,0 +1,33 @@
+<template>
+    <section class="hero is-medium">
+        <div class="hero-body">
+            <div class="container has-text-centered">
+                <img
+                    width="64"
+                    src="/assets/images/cheeper.svg"
+                    alt="cheeper"
+                />
+                <h1 class="is-size-2 has-text-info-dark logo-text">
+                    Cheeper
+                </h1>
+                <h2>A twitter's clone</h2>
+                <p class="buttons is-centered mt-4">
+                    <a href="#" class="button is-link">
+                        <span>Sign Up</span>
+                    </a>
+                    <a href="#" class="button is-link">
+                        <span>Log in</span>
+                    </a>
+                </p>
+            </div>
+        </div>
+    </section>
+</template>
+
+<script lang="ts">
+import Vue from "vue";
+import Component from "vue-class-component";
+
+@Component
+export default class Home extends Vue {}
+</script>

assets/js/router/index.ts

@@ -0,0 +1,19 @@
+import Vue from "vue";
+import VueRouter, { RouteConfig } from "vue-router";
+import Home from "@/pages/Home.vue";
+
+Vue.use(VueRouter);
+
+const routes: Array<RouteConfig> = [
+    {
+        path: "/",
+        name: "Home",
+        component: Home,
+    },
+];
+
+const router = new VueRouter({
+    routes,
+});
+
+export default router;

assets/js/shims-vue.d.ts

@@ -0,0 +1,4 @@
+declare module "*.vue" {
+    import Vue from "vue";
+    export default Vue;
+}

package.json

@@ -2,17 +2,29 @@
     "devDependencies": {
         "@fortawesome/fontawesome-free": "^5.13.0",
         "@symfony/webpack-encore": "^0.30.0",
+        "@typescript-eslint/eslint-plugin": "^3.3.0",
+        "@typescript-eslint/parser": "^3.3.0",
+        "@vue/eslint-config-prettier": "^6.0.0",
+        "@vue/eslint-config-typescript": "^5.0.2",
         "buefy": "^0.8.20",
         "bulma": "^0.9.0",
         "core-js": "^3.0.0",
+        "eslint": "^7.2.0",
+        "eslint-plugin-prettier": "^3.1.4",
+        "eslint-plugin-vue": "^6.2.2",
         "fork-ts-checker-webpack-plugin": "^4.0.0",
         "node-sass": "^4.14.1",
+        "prettier": "^2.0.5",
         "regenerator-runtime": "^0.13.2",
         "sass-loader": "^8.0.0",
+        "sort-package-json": "^1.44.0",
         "ts-loader": "^5.3.0",
+        "tsconfig-paths-webpack-plugin": "^3.2.0",
         "typescript": "^3.9.5",
         "vue": "^2.6.11",
+        "vue-class-component": "^7.2.3",
         "vue-loader": "^15.9.2",
+        "vue-router": "^3.3.4",
         "vue-template-compiler": "^2.6.11",
         "webpack-notifier": "^1.6.0"
     },

src/App/Controller/DefaultController.php

@@ -13,6 +13,8 @@ final class DefaultController extends AbstractController
     /** @Route("/") */
     public function __invoke(): Response
     {
-        return $this->render('default/index.html.twig');
+        return $this->render('spa.html.twig', [
+            'entrypoint' => 'app'
+        ]);
     }
 }

tsconfig.json

@@ -2,11 +2,38 @@
 {
     "compilerOptions": {
         // this aligns with Vue's browser support
-        "target": "es5",
+        "target": "esnext",
         // this enables stricter inference for data properties on `this`
         "strict": true,
         // if using webpack 2+ or rollup, to leverage tree shaking:
-        "module": "es2015",
-        "moduleResolution": "node"
-    }
+        "module": "esnext",
+        "moduleResolution": "node",
+        "experimentalDecorators": true,
+        "importHelpers": true,
+        "esModuleInterop": true,
+        "allowSyntheticDefaultImports": true,
+        "sourceMap": true,
+        "baseUrl": ".",
+        "paths": {
+            "@/*": [
+                "assets/js/*"
+            ]
+        },
+        "lib": [
+            "esnext",
+            "dom",
+            "dom.iterable",
+            "scripthost"
+        ]
+    },
+    "include": [
+        "assets/js/**/*.ts",
+        "assets/js/**/*.tsx",
+        "assets/js/**/*.vue"
+//        "tests/**/*.ts",
+//        "tests/**/*.tsx"
+    ],
+    "exclude": [
+        "node_modules"
+    ]
 }

webpack.config.js

@@ -1,16 +1,18 @@
-var Encore = require('@symfony/webpack-encore');
+const Encore = require("@symfony/webpack-encore");
+const path = require("path");
+const TsconfigPathsPlugin = require("tsconfig-paths-webpack-plugin");
 
 // Manually configure the runtime environment if not already configured yet by the "encore" command.
 // It's useful when you use tools that rely on webpack.config.js file.
 if (!Encore.isRuntimeEnvironmentConfigured()) {
-    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
+    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || "dev");
 }
 
 Encore
     // directory where compiled assets will be stored
-    .setOutputPath('public/build/')
+    .setOutputPath("public/build/")
     // public path used by the web server to access the output path
-    .setPublicPath('/build')
+    .setPublicPath("/build")
     // only needed for CDN's or sub-directory deploy
     //.setManifestKeyPrefix('build/')
 
@@ -23,7 +25,7 @@ Encore
      * Each entry will result in one JavaScript file (e.g. app.js)
      * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
      */
-    .addEntry('app', './assets/js/app.ts')
+    .addEntry("app", "./assets/js/app.ts")
     //.addEntry('page1', './assets/js/page1.js')
     //.addEntry('page2', './assets/js/page2.js')
 
@@ -49,7 +51,7 @@ Encore
 
     // enables @babel/preset-env polyfills
     .configureBabelPresetEnv((config) => {
-        config.useBuiltIns = 'usage';
+        config.useBuiltIns = "usage";
         config.corejs = 3;
     })
 
@@ -71,7 +73,9 @@ Encore
     //.enableReactPreset()
     //.addEntry('admin', './assets/js/admin.js')
 
-    .enableVueLoader(() => {}, { runtimeCompilerBuild: false })
-;
+    .enableVueLoader(() => {}, { runtimeCompilerBuild: false });
 
-module.exports = Encore.getWebpackConfig();
+const webpackConfig = Encore.getWebpackConfig();
+webpackConfig.resolve.plugins = [new TsconfigPathsPlugin()];
+
+module.exports = webpackConfig;