project setup

Author: Niket Pathak

.env.dist

@@ -0,0 +1,24 @@
+# This file is a "template" of which env vars need to be defined for your application
+# Copy this file to .env file for development, create environment variables when deploying to production
+# https://symfony.com/doc/current/best_practices/configuration.html#infrastructure-related-configuration
+
+###> symfony/framework-bundle ###
+APP_ENV=dev
+APP_SECRET=36e73c05f63bc2875d261e9652ed0d33
+#TRUSTED_PROXIES=127.0.0.1,127.0.0.2
+#TRUSTED_HOSTS=localhost,example.com
+###< symfony/framework-bundle ###
+
+###> symfony/swiftmailer-bundle ###
+# For Gmail as a transport, use: "gmail://username:password@localhost"
+# For a generic SMTP server, use: "smtp://localhost:25?encryption=&auth_mode="
+# Delivery is disabled by default via "null://localhost"
+MAILER_URL=null://localhost
+###< symfony/swiftmailer-bundle ###
+
+###> doctrine/doctrine-bundle ###
+# Format described at http://docs.doctrine-project.org/projects/doctrine-dbal/en/latest/reference/configuration.html#connecting-using-a-url
+# For an SQLite database, use: "sqlite:///%kernel.project_dir%/var/data.db"
+# Configure your db driver and server_version in config/packages/doctrine.yaml
+DATABASE_URL=mysql://db_user:db_password@127.0.0.1:3306/db_name
+###< doctrine/doctrine-bundle ###

.gitignore

@@ -0,0 +1,23 @@
+
+###> symfony/framework-bundle ###
+/.env
+/public/bundles/
+/var/
+/vendor/
+###< symfony/framework-bundle ###
+
+###> symfony/webpack-encore-pack ###
+/node_modules/
+/public/build/
+npm-debug.log
+yarn-error.log
+###< symfony/webpack-encore-pack ###
+
+###> symfony/phpunit-bridge ###
+.phpunit
+/phpunit.xml
+###< symfony/phpunit-bridge ###
+
+###> symfony/web-server-bundle ###
+/.web-server-pid
+###< symfony/web-server-bundle ###

assets/.gitignore

@@ -0,0 +1,7 @@
+/* GKM version 0.1 */
+
+body {
+  div {
+    color:black;
+  }
+}

assets/css/custom.less

@@ -0,0 +1,36 @@
+<template>
+    <div class="container">
+        <nav class="navbar is-transparent">
+            <div class="navbar-brand">
+                <h1>Getting started with Symfony + VueJS</h1>
+            </div>
+            <div id="vue-menu" class="navbar-menu">
+                <div class="navbar-start">
+                    <router-link tag='div' to="/" class="navbar-item">Home</router-link>
+                    <router-link tag='div' to="hello" class="navbar-item">Hello</router-link>
+                    <router-link tag='div' to="notfound" class="navbar-item">Not Found URL</router-link>
+                </div>
+            </div>
+        </nav>
+        <div>
+            <router-view></router-view>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "app"
+    }
+</script>
+
+<style>
+    .container .navbar-item {
+        cursor: pointer;
+        text-decoration: underline;
+    }
+
+    h1 {
+        color:blue;
+    }
+</style>

assets/js/app.vue

@@ -0,0 +1,26 @@
+<template>
+    <div id="vueApp">
+        <div id="container">
+            <div id="welcome">
+                <h1>Hello Page</h1>
+            </div>
+            <div id="status">
+                <p>
+                    You are now in  <b>Hello vue route</b>
+                </p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "hello"
+    }
+</script>
+
+<style scoped lang="less">
+    #welcome h1 {
+        color: green;
+    }
+</style>

assets/js/components/hello.vue

@@ -0,0 +1,26 @@
+<template>
+    <div id="vueApp">
+        <div id="container">
+            <div id="welcome">
+                <h1>Home Page</h1>
+            </div>
+            <div id="status">
+                <p>
+                    You are now in <b>Home vue route</b>
+                </p>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "home"
+    }
+</script>
+
+<style scoped>
+    #status p {
+        color: green;
+    }
+</style>

assets/js/components/home.vue

@@ -0,0 +1,33 @@
+<template>
+    <section class="hero is-danger">
+        <div class="hero-body">
+            <div class="container">
+                <h1 class="title">
+                    404 Page not found
+                </h1>
+                <p class="subtitle">
+                    its just another vue route - you can change the url above to any thing
+                </p>
+            </div>
+        </div>
+    </section>
+</template>
+
+<script>
+    export default {
+        name: "notFound"
+    }
+</script>
+
+<style scoped lang="less">
+    .title {
+        color: #0000F0;
+    }
+    .hero-body {
+        background-color: gray;
+        padding: 15px;
+        .title {
+            color: white;
+        }
+    }
+</style>

assets/js/components/notFound.vue

@@ -0,0 +1,18 @@
+/* GKM version 0.1 */
+import Vue from 'vue';
+import VueRouter from 'vue-router';
+
+// app specific
+import router from './router/'
+import app from './app'
+
+Vue.use(VueRouter);
+
+
+// bootstrap the demo
+let demo = new Vue({
+    el: '#vueApp',
+    router,
+    template: '<app/>',
+    components: { app }
+});

assets/js/index.js

@@ -0,0 +1,27 @@
+import Router from 'vue-router'
+
+// components
+import home from '../components/home'
+import hello from '../components/hello'
+import notfound from '../components/notFound'
+
+export default new Router({
+    mode: 'history',
+    routes: [
+        {
+            path: '/',
+            name: 'homepage',
+            component: home
+        },
+        {
+            path: '/hello',
+            name: 'Hello',
+            component: hello
+        },
+        {
+            path: '*',
+            name: 'notfound',
+            component: notfound
+        }
+    ]
+})