Hi,
great work - thx for sharing.

I am using PHPStorm and use the Symfony Plugin, but I don't know how to configure the plugin when Symfony is not in root dir of the project, but in a sub dir.

Greetings,
Dome

Lines starting https://github.com/thecodingmachine/symfony-vuejs/blob/master/app/config/bootstrap.php#L11 to L17 should be commented as Symfony should use environment variable and not values from .env.

Sorry i think it's simple to fix but i try everything on the docker compose file and it's impossible to get a correct access to database with symfony...
Even if i use the initial code of the repo without touching to the files i get this error.
phpmyadmin is working correctly but when i use doctrine to migrate tables from your files this error is throwed :

In AbstractMySQLDriver.php line 113:
An exception occurred in driver: SQLSTATE[HY000] [2002] No such file or directory

I know 2002 error coming from a database issue but i don't find how to fix it.
I get the same error with fixture command.

Thanks for you help !

Hi!
I would like to propose async/await approach.
There are some more lines of code and it looks more habitually (to me :) )

async/await version

actions: {
        async createPost ({commit}, message) {
            commit('CREATING_POST')
            try {
                const response = await PostAPI.create(message)
                commit('CREATING_POST_SUCCESS', response.data))
                return response.data
            } catch (err) {
                commit('CREATING_POST_ERROR', err)
                return null
            }
        },
      // ...
}

And some additional actions to make it work (async/await).

webpack.config.js

    .configureBabel(function(babelConfig) {
      babelConfig.plugins.push("@babel/plugin-transform-runtime");
    })

Babel 7

$ yarn add -D @babel/plugin-transform-runtime
$ yarn add -D @babel/runtime

package.json

{
 ...
    "browserslist": [
        "> 0.5%",
        "last 2 versions",
        "Firefox ESR",
        "not dead"
    ]
 ...
}

When I exec the command yarn dev in the container an error is throw :

WARNING   Webpack Encore requires version ^15.0.11 of vue-loader, but your version (14.2.3) is too old. The related feature will probably *not* work correctly.
 Error: Cannot find module 'vue-loader/lib/plugin'

When I try to get it running without docker, I get the following error: Environment variable not found: "DATABASE_URL".

My .env file looks like this:

KERNEL_CLASS=App\Kernel
APP_SECRET=s$cretf0rt3st
SYMFONY_DEPRECATIONS_HELPER=999999

DATABASE_URL='mysql://root:@localhost:3306/test'

I'm new to symfony and I can't figure out the problem.

Hi, thanks for the example!
is it possible to switch authentication from JSON auth to JWT? maybe using lexik/LexikJWTAuthenticationBundle?

Thanks

I have around 600ms response time for the /api/posts request (with docker-sync).
Looking for ways to improve this.

The following div should not be there since it is already within the error-message component
https://github.com/thecodingmachine/symfony-vuejs/blob/master/app/assets/vue/views/Posts.vue#L25

Best,

Thanks for great Symfony/Vuejs example!
But what if i want be sure to my app was indexed by google?
Can this app render static pages?

#I was having issues when submitted data to the backend, the controller was unable to get the message parameter. In order to process requests that have Content-Type: application/json header defined I added the following code on the ApiPostController.php file:

    /**
     * @Rest\Post("/api/post/create", name="createPost")
     * @param Request $request
     * @return JsonResponse
     * @IsGranted("ROLE_FOO")
     */
    public function createAction(Request $request): JsonResponse
    {
        // Added this in order to handle requests with Content-Type: application/json
        if (0 === strpos($request->headers->get('Content-Type'), 'application/json')) {
            $data = json_decode($request->getContent(), true);
            $request->request->replace(is_array($data) ? $data : array());
        }
        $message = $request->request->get('message');
        $postEntity = $this->postService->createPost($message);
        $data = $this->serializer->serialize($postEntity, 'json');
        return new JsonResponse($data, 200, [], true);
    }

I don't know if this is the best way to do this, I'm new to Symfony.

BTW, thanks for creating this tutorial / guide was very helpful :)

Hi!

In your code there is a line:

// necessary to force the update to see the change
$em->getUnitOfWork()->recomputeSingleEntityChangeSet($meta, $entity);

I don't quite understand what's the purpose of this code?

Also in a User entity you have method eraseCredentials(), but it never gets invoked. When should I use it?

I'll update this tutorial for Symfony 4.3.

I'll also include the suggestions from @pavel-redkin @moufmouf @gadelkareem.

I would use app.test instead of the app.localhost. Chrome (tested on W10 Pro) will only go to 127.0.0.1 for *.localhost it appears. Worked fine in other browsers.

Actually, the package that provides GraphQL capabilities is not supporting multiple endpoints : see issue

We need this if :

• we have multiple datasources,
• when the same container can respond on multiple domain names (auth cookies will not be sent on different domains anymore)

A solution whould bo to define the GQL endpoint on the fly, but this doens't seem possible either with Gomah/nuxt-graphql-request

Terrific article (https://thecodingmachine.io/building-a-single-page-application-with-symfony-4-and-vuejs).

If you decide to update to Symfony 5 (which would be awesome), can you also consider using ApiPlatform instead of custom JSON endpoints?

Oh, if if you're feeling really generous with your time and talent, what about integrating Google's Workbox, and make this an offline SPA?

Question: if you were starting over, would you use Vue, or would you use React?

Anyway, thanks very much for your very thorough tutorial, much appreciated.

Currently, the "authenticated" cookie will be cleared although the user is connected in Symfony session.

This isn't so much as bug/issue as it is a discussion...

I'm trying to figure out why this project is using a wrapped Doctrine connection

instead of allowing the PdoSessionHandler to create its own connection as suggested by the symfony docs
https://symfony.com/doc/4.4/session/database.html#store-sessions-in-a-relational-database-mariadb-mysql-postgresql

Can anyone shed light on this?

We should introduce how to build a "theme" with bootstrap and so on using Webpack Encore

Improving error handling by:

• displaying 500 error page
• returning JsonResponse from backend exceptions.

php bin/console doctrine:fixtures:load

Эту команду надо выполнять уже после изменения файла config/packages/security.yaml ,
иначе это приводит к ошибке в заголовке

I think you failed by adding these dependencies to the devDependencies:

yarn add --dev vue-router axios vuex

You should install them as a dependencies because you use them in your application, not only as a dev tools.

Hello !

First : thank you for this tutorial, It is very helpfull to begin with vue with Sf

I have a question : how would you implement a remember me cookie ?