Download the PHP package k3ssen/symfony-vuetified without Composer

On this page you can find all versions of the php package k3ssen/symfony-vuetified. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.

FAQ

After the download, you have to make one include require_once('vendor/autoload.php');. After that you have to import the classes with use statements.

Example:
If you use only one package a project is not needed. But if you use more then one package, without a project it is not possible to import the classes with use statements.

In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
Some PHP packages are not free to download and because of that hosted in private repositories. In this case some credentials are needed to access such packages. Please use the auth.json textarea to insert credentials, if a package is coming from a private repository. You can look here for more information.

  • Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
  • To use Composer is sometimes complicated. Especially for beginners.
  • Composer needs much resources. Sometimes they are not available on a simple webspace.
  • If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
  • Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Please rate this library. Is it a good library?

Informations about the package symfony-vuetified

SymfonyVuetifiedBundle

Integrate Vuetify into your Symfony application, making it easy to pass serverside data to Vue through Twig.

Getting started

Assuming you have a Symfony 4.4, 5+ or 6+ application installed on a server with composer, yarn (or npm) and required modules:

  1. Run composer require k3ssen/symfony-vuetified
  2. Run php bin/console symfony-vuetified:setup if you just created a new symfony project. Otherwise, see the manual setup documentation.
  3. Install dependencies
    1. Start by running yarn install.
    2. Make sure to add the peer-dependencies as well. Preferably you should check the output in your console, though the following should probably suffice:
      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
    3. Run yarn dev
      When you see an Error for missing required bundles, install that bundle and run yarn dev again. Keep repeating this process (about 5 times) until DONE.

Concept/usage

This bundle aims to quickly achieve the following:

Global vue object

The basic concept is that you can use a global vue object. This object will be used for creating the vue-instance.

Note: Vue and Twig both use {{ and }} delimiters by default, so here @{ and } are used instead for Vue. You can specify different delimiters if you want, but avoid using ${ like Symfony's example: When you use ${something} this is parsed as javascript variable when used inside ticks ( ` ), which can be really confusing.

Passing serverside data to vue: vue_data

When passing data, you’ll often need to do things like below:

If you need to pass server data to vue, you can use vue_data instead:

Data added this way will be json encoded and merged with the global vue object.

Global observable: $store and vue_store

In addition to adding data to the vue-instance, data can be added to the vue $store observable, making data available to all vue components.

Global vue components

Custom and vendor Vue-components aren't global by default, so they can't be used in Twig.

The globalComponents.ts file makes the components of Vuetify and this bundle globally available. This way you can use these components almost wherever you want, including Twig.

The downside is that this'll increase the size of your javascript resources. If you want don't want to make all these components global, you can choose to use the vue-object.init.ts file instead of using import '@k3ssen/symfony-vuetified'. Inside your app.ts, it would look something like below:

Now only components of the vue-core will work in twig, so you won't be able to use components like <sv-form> of <v-alert> in your twig files. If you want to make specific components available to twig, <sv-app> for example, you could use something like this:

Fetch component

Because dynamic vue components can be rendered at runtime, the same principles can be used with fetch and load the response in a component.

This project includes a FetchComponent that makes it really easy:

If you're using {% extends '@SymfonyVuetified/base.html.twig' %} in your base.html.twig then the suitable file to extend will be used: if you're using fetch, only a template and the script will be loaded. Otherwise, the entire page is loaded.

Note: this component requires loading the fetched javascript. Fetching a page that defines variables/constants that were defined already will result in javascript-errors. Therefore, this bundle uses window to put global objects (like the global vue) into.
The sv-fetch component specifically takes the global objects vue, vueData, vueStoreData into account by clearing these objects before fetching new content.

Symfony form rendered in Vue

Using form-functions in Twig or form_themes to create a Vuetify-form is difficult, especially when dealing with edge-cases. This bundle enables you to render Symfony's FormView clientside:

You can take full control and render parts individually. It takes some getting used to it, because obviously Vue works differently from Twig's form-method, but it is quite powerful.

Read the forms documentation for more information.


All versions of symfony-vuetified with dependencies

PHP Build Version
Package Version
Requires php Version >=7.1.3
symfony/webpack-encore-bundle Version >=1.9.0
Composer command for our command line client (download client) This client runs in each environment. You don't need a specific PHP version etc. The first 20 API calls are free. Standard composer command

The package k3ssen/symfony-vuetified contains the following files

Loading the files please wait ....