title: Using Vue with django
body: <p>I've recently started on some social media web site using Django. Im using the default <strong>django</strong> template engine to fill my pages. But at this moment, I want to add <strong>javascript</strong> to make the site more dynamic. This means:</p>
  
  <ul>
  <li>The header and footer is the <strong>same on each page</strong>. The header should have a dropdown menu, a search form that searches when you're typing.</li>
  <li>My current django application has a <strong>base template</strong> that has the header and footer HTML, since every page should have this.</li>
  <li>The site consists of <strong>multiple pages</strong>, think of index page, profile page, register page. Each of these pages have some common but also a lot of different dynamic components. For example the register page should have form validation on the fly, but the profile page doesn't need this. The profile page should have a status feed with infinite scrolling.</li>
  </ul>
  
  <p>I want to use Vue to deal with the dynamic components, but I don't know how I should get started. The application should not be a SPA.</p>
  
  <ul>
  <li>How should I <strong>structure</strong> the Vue code?</li>
  <li>How should I <strong>bundle</strong> this. Using Gulp? Or maybe <a href="https://github.com/owais/django-webpack-loader" rel="noreferrer">django-webpack-loader</a>?</li>
  <li>I should still be able to use the Django template tags, for example I want to be able to use <code>{% url 'index' %}</code> in the dropdown menu.</li>
  </ul>