{"id":28276004,"url":"https://github.com/thewalkingcoder/symfony-vuejs","last_synced_at":"2025-10-28T07:39:04.347Z","repository":{"id":39422092,"uuid":"203120146","full_name":"thewalkingcoder/symfony-vuejs","owner":"thewalkingcoder","description":"poc symfony vuejs","archived":false,"fork":false,"pushed_at":"2023-01-04T07:33:38.000Z","size":2424,"stargazers_count":0,"open_issues_count":25,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-02T10:16:08.049Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"PHP","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thewalkingcoder.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-19T07:23:37.000Z","updated_at":"2020-08-10T07:36:54.000Z","dependencies_parsed_at":"2023-02-02T03:31:32.798Z","dependency_job_id":null,"html_url":"https://github.com/thewalkingcoder/symfony-vuejs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/thewalkingcoder/symfony-vuejs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thewalkingcoder%2Fsymfony-vuejs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thewalkingcoder%2Fsymfony-vuejs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thewalkingcoder%2Fsymfony-vuejs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thewalkingcoder%2Fsymfony-vuejs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thewalkingcoder","download_url":"https://codeload.github.com/thewalkingcoder/symfony-vuejs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thewalkingcoder%2Fsymfony-vuejs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":281403399,"owners_count":26495042,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-28T02:00:06.022Z","response_time":60,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-05-21T04:16:54.424Z","updated_at":"2025-10-28T07:39:04.328Z","avatar_url":"https://github.com/thewalkingcoder.png","language":"PHP","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Application Symfony avec VueJs et TailwindCss\n\n\n## Installation\n\n### Symfony\n\nCréer un projet symfony\n\n```\n\nsymfony new nomDuProjet --full\n\n```\n\nAjouter le pack apache pour avoir la barre de debug qui fonctionne correctement\n\n```\n\ncomposer require apache-pack\n\n```\n\nInstaller webpack Encore\n\n```\n\ncomposer require webpack-encore\n\n```\n\n### Côté Js\n\nInstaller les dépendances pour webpack-encore\n\n```\n\nyarn install\n\n```\n\n### vueJs\n\nActiver vueJs pour webpack\n\n```\n//webpack.config.js\n\n.enableVueLoader()\n\n```\n\nLancer la commande\n\n```\nyarn run dev-server\n\n```\n\nVueJs n'étant pas installé, vous aurez un message avec les composants à ajouter.\nLors de la création du document ( août 2019) la commande est \n \n```\n\nyarn add vue vue-loader@^15.0.11 vue-template-compiler --dev\n\n```\n\n### Tailwindcss\n\n```\n\nyarn add tailwindcss\n\n```\n\nCréer un fichier à la racine du projet **postcss.config.js**\n\n```\nmodule.exports = {\n  plugins: [\n    require('tailwindcss'),\n    require('autoprefixer')\n  ]\n}\n\n```\n\nActiver postCss et autoprefixer\n\n```\n//webpack.config.js\n\n.enablePostCssLoader()\n\n```\n\nLancer la commande\n\n```\nyarn run dev-server\n\n```\n\npostcss n'étant pas installé, vous aurez un message avec les composants à ajouter.\nLors de la création du document ( août 2019) la commande est\n\n```\n\nyarn add postcss-loader@^3.0.0 autoprefixer --dev\n\n```\n\nAjouter ensuite dans votre **package.json**\n\n```\n\"browserslist\": [\n    \"\u003e 0.5%\",\n    \"last 2 versions\",\n    \"IE 11\"\n ]\n\n```\n\n### sass\n\n```\n\nyarn add sass-loader sass node-sass --dev\n\n```\n\nActiver sass pour webpack\n\n```\n\n//webpack.config.js\n\n\n.enableSassLoader()\n\n```\n\nSi vous utilisez tailwindcss vous devez désactiver le resolverUrl\n\n```\n\n\n.enableSassLoader(function (options) {}, {\n  resolveUrlLoader: false\n})\n\n```\n## Premier pas\n\nPour communiquer avec webpack depuis votre VM et bénéficier des avantages du server Js modifier dans votre\n\n**package.json**\n\n```\n...\n\n\n\"scripts\": {\n    \"dev-server\": \"encore dev-server --port 8081 --host 0.0.0.0 --public http://VOTREDNS:8081 --disable-host-check\",\n     ...   \n},\n\n...\n\n```\n\nCréer un controller\n\n```\nphp bin/console make:controller\n\n```\n\nAjouter les liens css et js pour webpack\n\n```\n//ex: template/base.html.twig\n\n//pour le css\n{% block stylesheets %}\n    {{ encore_entry_link_tags('app') }}\n{% endblock %}\n\n//pour le js\n{% block javascripts %}\n    {{ encore_entry_script_tags('app') }}\n{% endblock %}\n\n```\nle tag **app** et lié à l'entrée définie dans **webpack.config.js**\n\n```\n.addEntry('app', './assets/js/app.js')\n\n```\n\nAfficher une page héritant de votre template principal, et modifier la couleur de fond par exemple, la modification\nsera automatiquement appliquée...(merci le hot reloading)\n\n```\n//assets/css/app.css\n\nbody {\n    background-color: red;\n}\n\n\n```\n\nAjoutons un peu de VueJs avec un component Custom\n\nCréer un fichier **assets/vuejs/index.js**\n\n```\n\nimport Vue from 'vue'\n\nnew Vue({\n    el: '#appWithVueJsComponent'\n});\n\n\n```\n\nOn va greffer VueJs à un élement html ayant l'id **appWithVueJsComponent**\n\nAjouter ensuite l'entrée dans **webpack.config.js**\n\n```\n.addEntry('vuejs', './assets/vuejs/index.js')\n\n```\n\nDéclarer l'élement id et le Js pour webpack\n\n```\nex: templates/base.html.twig\n\n{% block stylesheets %}\n    ....\n    {{ encore_entry_link_tags('vuejs') }}\n{% endblock %}\n\n\u003cdiv id=\"appWithVueJsComponent\"\u003e\n    {% block body %}\n    \n    {% endblock %}\n\u003c/div\u003e\n\n....\n\n{% block javascripts %}\n    ....    \n    {{ encore_entry_script_tags('vuejs') }}\n\n{% endblock %}\n\n\n``` \nRedémarrer le serveur Js pour qu'il prenne en compte la nouvelle entrée.\n\n``` \n\nyarn run dev-server\n\n``` \n\n### Création d'un composant vueJs\n\nCréer un fichier sous assets/vuejs/components/HelloWord.vue\n\n```\n\n\u003cscript\u003e\n    export  default {\n        name: 'HelloWord'\n    }\n\u003c/script\u003e\n\u003ctemplate\u003e\n    \u003cdiv\u003e\n        \u003cspan class=\"title\"\u003eMon composant qui fait HelloWord\u003c/span\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\u003cstyle lang=\"scss\"\u003e\n\n    $colorTitle: #FF0000;\n\n    .title {\n        background: $colorTitle;\n        color: #FFF;\n    }\n\n\u003c/style\u003e\n\n\n```\nActivation du composant globalement\n\n```\n//assets/vuejs/index.js\n\nimport Vue from 'vue'\nimport HelloWord from \"./components/HelloWord\";\n\n\nnew Vue({\n    el: '#app',\n    components: {\n        HelloWord\n    }\n});\n\n\n```\n\nIl ne reste plus qu'à l'utiliser dans notre template twig\n\n```\n//templates/app/index.html.twig\n\n{% block body %}\n    \u003cdiv\u003eMon super projet\u003c/div\u003e\n    \u003cdiv\u003e\u003chello-word/\u003e\u003c/div\u003e\n{% endblock %}\n\n\n```\n\n# Polyfill\n\nDe base webpackEncore ajoute tous les polyfills nécessaire pour que votre application soit le plus compatible possible.\n\nCependant lors de l'utilisation de promise dans un composant vuejs j'ai rencontré sur IE 11 une erreur de style\n\n```\n\nPromise est indéfinie\n\n```\n\nLa solution trouvée a été de re-importer les polyfills nécessaire.\n\n```\nassets/vuejs/index.js\n\nimport \"core-js/stable\";\nimport \"regenerator-runtime/runtime\";\n\n```\n\n## Tests\n\n```\n\nyarn add @vue/test-utils jest --dev\n\n```\n\nsi besoin\n\n```\nyarn add jest jest-canvas-mock babel-jest vue-jest --dev \n```\n\npackage.json\n\n```\n\"scripts\": {\n    ...\n     \"test\": \"jest\"\n}\n```\n\njest.config.js\n\n```\nmodule.exports = {\n    moduleFileExtensions: [\n        'js',\n        'jsx',\n        'json',\n        'vue'\n    ],\n    transform: {\n        '^.+\\\\.vue$': 'vue-jest',\n        '^.+\\\\.jsx?$': 'babel-jest'\n    },\n    transformIgnorePatterns: [\n        '/node_modules/'\n    ],\n    moduleNameMapper: {\n        '^@/(.*)$': '\u003crootDir\u003e/src/$1'\n    },\n    testMatch: [\n        '**/tests/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'\n    ],\n    testURL: 'http://localhost/'\n}\n\n```\n\nbabel.config.js\n\n```\nmodule.exports = {\n    presets: [\n        [\n            '@babel/preset-env',\n            {\n                targets: {\n                    node: 'current',\n                },\n            },\n        ],\n    ],\n};\n\n```\n\n\n\n\n\n\n\n## Références\n\n- https://symfony.com/doc/current/frontend.html\n\n- https://tailwindcss.com\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthewalkingcoder%2Fsymfony-vuejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthewalkingcoder%2Fsymfony-vuejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthewalkingcoder%2Fsymfony-vuejs/lists"}