init

Author: karolkrupa

.gitignore

@@ -14,3 +14,10 @@
 .phpunit.result.cache
 /phpunit.xml
 ###< symfony/phpunit-bridge ###
+
+###> symfony/webpack-encore-bundle ###
+/node_modules/
+/public/build/
+npm-debug.log
+yarn-error.log
+###< symfony/webpack-encore-bundle ###

.idea/.gitignore

@@ -0,0 +1,15 @@
+<?php
+/**
+ * User: Karol Krupa <[email protected]>
+ * Date: 23/07/2020
+ */
+
+namespace KarolKrupa\SymfonyVueSrrBundle;
+
+
+use Symfony\Component\HttpKernel\Bundle\Bundle;
+
+class SymfonyVueSsrBundle extends Bundle
+{
+
+}

.idea/misc.xml

@@ -0,0 +1,26 @@
+# Symfony Twig + Vue components SSR (V8js/node) example
+
+This is example of implementation server side rendering vue components in
+twig based on V8js (rendering in V8js is much faster than rendering in node.
+v8js renders the content within 30 ms, when the node taking about 300+ ms)
+
+## Usage
+
+```bash
+# build server side bundle
+$ npx webpack --config ssr.webpack.js --target node
+
+# build client side bundle
+$ yarn encore dev
+```
+
+#### Client side bundle
+
+The most important thing is we have to update template string in client 
+side script before building `assets/vue/vue.js`
+
+A good solution would be to insert the template in the html script tag as global
+javascript variable. We must remember that the template should be 
+passed to the client-side script after rendering in javascript it must be 
+identical to the template inserted on the server to avoid warning 
+about vue template mismatch

.idea/modules.xml

@@ -0,0 +1,3 @@
+body {
+    background-color: lightgray;
+}

.idea/php.xml

@@ -0,0 +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).
+ */
+
+// any CSS you import will output into a single css file (app.css in this case)
+import '../css/app.css';
+
+// 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');

.idea/sf-vue-ssr.iml

@@ -0,0 +1,26 @@
+<template>
+    <div>
+        Counter: {{ counter }}
+        <button @click="add">Add</button>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "test-component",
+        data() {
+            return {
+                counter: 0
+            }
+        },
+        methods: {
+            add() {
+                this.counter++;
+            }
+        }
+    }
+</script>
+
+<style scoped>
+
+</style>

.idea/symfony2.xml

@@ -0,0 +1,14 @@
+import Vue from 'vue'
+import TestComponent from "./TestComponent.vue";
+
+let vm = new Vue({
+    template: PHP.html,
+
+    components: {
+        TestComponent
+    }
+})
+
+renderVueComponentToString(vm, (err, res) => {
+    print(res)
+})