{"id":15026060,"url":"https://github.com/k3ssen/symfonyvuetified","last_synced_at":"2025-04-09T20:04:55.351Z","repository":{"id":53128249,"uuid":"250988772","full_name":"k3ssen/SymfonyVuetified","owner":"k3ssen","description":"Bundle for Symfony 4.4, 5+ or 6+ with Vuetify frontend, having twig content passed down to vue components","archived":false,"fork":false,"pushed_at":"2022-07-11T17:38:08.000Z","size":479,"stargazers_count":16,"open_issues_count":0,"forks_count":3,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-04-09T20:04:48.577Z","etag":null,"topics":["php","php7","php72","php73","php74","php8","php80","symfony","symfony4","symfony5","twig","typescript","vuejs","vuetify"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/k3ssen.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-03-29T08:45:10.000Z","updated_at":"2024-08-26T09:12:25.000Z","dependencies_parsed_at":"2022-08-20T01:12:09.684Z","dependency_job_id":null,"html_url":"https://github.com/k3ssen/SymfonyVuetified","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k3ssen%2FSymfonyVuetified","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k3ssen%2FSymfonyVuetified/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k3ssen%2FSymfonyVuetified/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/k3ssen%2FSymfonyVuetified/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/k3ssen","download_url":"https://codeload.github.com/k3ssen/SymfonyVuetified/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248103868,"owners_count":21048245,"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","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":["php","php7","php72","php73","php74","php8","php80","symfony","symfony4","symfony5","twig","typescript","vuejs","vuetify"],"created_at":"2024-09-24T20:03:38.968Z","updated_at":"2025-04-09T20:04:55.318Z","avatar_url":"https://github.com/k3ssen.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SymfonyVuetifiedBundle\n\nIntegrate Vuetify into your Symfony application, making it easy to pass serverside data to Vue through Twig.\n\n# Getting started\n\nAssuming you have a Symfony 4.4, 5+ or 6+ application installed on a server with composer, yarn (or npm)\nand required modules:\n\n1. Run `composer require k3ssen/symfony-vuetified`\n2. Run `php bin/console symfony-vuetified:setup` if you just created a new symfony project.\n   Otherwise, see the [manual setup](./Resources/docs/setup.md) documentation.\n3. Install dependencies\n   1. Start by running `yarn install`.\n   2. Make sure to add the peer-dependencies as well. Preferably you should check the output in your console, though\n   the following should probably suffice:  \n       `\n       yarn --dev add vue@^2.5 vue-class-component@^7.2 vue-property-decorator@^9.1 vue-template-compiler@^2.6.10 vuetify@^2.4 vuetify-loader@^1.7\n       `\n   3. Run `yarn dev`  \n   When you see an Error for missing required bundles, install that bundle and run `yarn dev` again.\n   Keep repeating this process (about 5 times) until DONE.\n\n\n# Concept/usage\n\nThis bundle aims to quickly achieve the following:\n* Communicate serverside data from Twig to Vue without resorting to API's or `data-` attributes in HTML.\n* Build your vue-components using Vuetify, Typescript and the [vue-property-decorator](https://npm.io/package/vue-property-decorator).\n* Render your Symfony form in Vuetify by using client-side form-rendering.\n* Render dynamic vue components that are fetched and loaded via twig-files.\n\n## Global vue object\n\nThe basic concept is that you can use a global vue object.\nThis object will be used for creating the vue-instance.\n\n```vue\n{% extends 'base.html.twig' %}\n{% block body %}\n    \u003cp\u003e\n        @{ seconds } seconds have passed.\n    \u003c/p\u003e\n{% endblock %}\n{% block script %}\n    \u003cscript\u003e\n        vue = {\n            data: () =\u003e ({\n                seconds: 0,\n            }),\n            mounted() {\n                setInterval(() =\u003e {\n                    this.seconds++;\n                }, 1000);\n            },\n        };\n    \u003c/script\u003e\n{% endblock %}\n```\n\n\u003e **Note:** Vue and Twig both use `{{` and `}}` delimiters by default, so here `@{` and `}` are used instead for Vue.\n\u003e You can specify different delimiters if you want, but avoid using `${` \n\u003e like [Symfony's example](https://symfony.com/doc/5.2/frontend/encore/vuejs.html#using-vue-inside-twig-templates):\n\u003e When you use `${something}` this is parsed as javascript variable when used inside ticks ( \\` ), which \n\u003e can be really confusing.\n\n## Passing serverside data to vue: `vue_data`\n\nWhen passing data, you’ll often need to do things like below:\n\n```vue\n{% block script %}\n    \u003cscript\u003e\n        vue = {\n            data: () =\u003e ({\n                someObject: {{ someObject | json_encode | raw }},\n                anotherObject: {{ anotherObject | json_encode | raw }},\n            })\n        }\n    \u003c/script\u003e\n{% endblock %}\n```\n\nIf you need to pass server data to vue, you can use `vue_data` instead:\n\n```vue\n{% block body %}\n    {{ vue_data('someObject', someObject) }}\n    {{ vue_data('anotherObject', anotherObject) }}\n    \u003cdiv v-if=\"someObject \u0026\u0026 anotherObject\"\u003e\n        This text is only shown if both objects have a value.\n    \u003c/div\u003e\n{% endblock %}\n```\n\nData added this way will be json encoded and merged with the global vue object.\n\n\n## Global observable: `$store` and `vue_store`\n\nIn addition to adding data to the vue-instance, data can be added to the vue $store observable, making\ndata available to all vue components.\n```vue\n{% block body %}\n    {{ vue_store('someObject', someObject) }}\n    {{ vue_store('anotherObject', anotherObject) }}\n    \u003cdiv v-if=\"$store.someObject \u0026\u0026 $store.anotherObject\"\u003e\n        This text is only shown if both objects have a value.\n    \u003c/div\u003e\n{% endblock %}\n```\n\n## Global vue components\nCustom and vendor Vue-components aren't global by default, so they can't be used in Twig.\n\nThe `globalComponents.ts` file makes the components of Vuetify and this bundle globally available.\nThis way you can use these components almost wherever you want, including Twig.\n\nThe downside is that this'll increase the size of your javascript resources. \nIf you want don't want to make all these components global, you can choose to use the \n`vue-object.init.ts` file instead of using `import '@k3ssen/symfony-vuetified'`.\nInside your `app.ts`, it would look something like below:\n\n```js\n//... other stuff in your app.js file \n\nimport Vue from 'vue';\n\nimport vueObject from '@k3ssen/symfony-vuetified/vue-object-init';\n\nif (document.getElementById('sv-app') \u0026\u0026 typeof window.vue === 'object') {\n    new Vue(vueObject);\n}\n```\nNow only components of the vue-core will work in twig, so you won't be able\nto use components like `\u003csv-form\u003e` of `\u003cv-alert\u003e` in your twig files. \nIf you want to make specific components available to twig, `\u003csv-app\u003e` for example, you could use something like this:\n```\nVue.component('SvApp', () =\u003e import('@k3ssen/symfony-vuetified/components/SvApp'));\n```\n\n# Fetch component\n\nBecause dynamic vue components can be rendered at runtime, the same principles can be used with `fetch` and load the\nresponse in a component.\n\nThis project includes a FetchComponent that makes it really easy:\n```vue\n\u003csv-fetch url=\"/url-to-controller-action\"\u003e\u003c/sv-fetch\u003e\n```\n\nIf you're using `{% extends '@SymfonyVuetified/base.html.twig' %}` in your `base.html.twig`\nthen the suitable file to extend will be used:\nif you're using fetch, only a template and the script will be loaded. Otherwise, the entire page is loaded.\n\n\u003e **Note:** this component requires loading the fetched javascript. \n\u003e Fetching a page that defines variables/constants that were defined already will result in javascript-errors.\n\u003e Therefore, this bundle uses `window` to put global objects (like the global `vue`) into.  \n\u003e The `sv-fetch` component specifically takes the global objects vue, vueData, vueStoreData into account by clearing these\n\u003e objects before fetching new content.\n\n\n## Symfony form rendered in Vue\n\nUsing form-functions in Twig or form_themes to create a Vuetify-form is difficult, especially when dealing with\nedge-cases. This bundle enables you to render Symfony's `FormView` clientside:\n\n```twig|vue\n{% block body %}\n    \u003csv-form :form=\"{{ form | vue}}\"\u003e\u003c/sv-form\u003e\n{% endblock %}\n```\n\nYou can take full control and render parts individually. It takes some getting used to\nit, because obviously Vue works differently from Twig's form-method, but it is quite powerful.\n\n[Read the forms documentation](./Resources/docs/forms.md) for more information.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fk3ssen%2Fsymfonyvuetified","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fk3ssen%2Fsymfonyvuetified","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fk3ssen%2Fsymfonyvuetified/lists"}