CODEWITHSUNDEEP
javascriptdjangovue.jsvuejs2
jec1918
jec1918

Reputation: 151

How to serve Vue data from Django backend?

So I am trying to use Vue & Django with django-webpack-loader (not DRF), but I'm just getting stuck whenever I try to actually feed Vue data. I am just trying to convert a static Django template to a (.vue) Vue template but I'm not sure how Vue is meant to handle that data?

I'm under the impression that you do something along the lines of this in the script tags:

  new Vue ({
    data: function () {
      game: {{game}}
    } 
  });

And then reference this with {{game.title}} etc in the main html of the Vue template, using Django {% verbatim %} tags so they don't interfere right?

But this just doesn't do anything, Django doesn't give Vue anything and I just get error 'game:' is defined but never used and error 'game' is not defined. I'm just not sure where to go from here and I just need some sort of help...

Upvotes: 0

Views: 756

Answers (1)

ilikerobots
ilikerobots

Reputation: 787

If I understand correctly that you're trying to have Django directly serve *.vue Single File Components (SFC), then I don't know of anyway that could work. These files will need to be separate from Django so that Vue/webpack can build them into JS.

But there is another way to integrate Django Templates with Vue SFCs. I (humbly) recommend reading my series of articles starting with Vue + Django — Best of Both Frontends. This will walk you through all the steps to do so, freely mixing Django Templates and Vue SFC wherever/whenever you deem appropriate.

There's a companion repo with a ready made Django+Vue starter app.

Otherwise, if I've misunderstood your intention, please clarify so we can better answer.

Upvotes: 1

Related Questions