Vapid and Vue.js


#1

Hi all, I’m super excited about Vapid. Up front, I’ve not dealt much with CMS before, and I figured it would be a great point of entry for me.

I’ll be the first to ask it: how would I get up and running using Vapid with Vue.js?

I usually initialize my Vue projects with either vue-cli, or I use Nuxt, which spoils me and sets everything up. As I understand it, Nuxt, being a SSR framework, wouldn’t play nicely with Vapid, so I’m going with plain Vue.

My guess is that I’ll want to be passing the contents of dist to Vapid, essentially as a replacement for the www folder that vapid-cli creates. As I’ve never done this before though, I don’t know if that’s actually correct, and I’m just playing around at the moment to see what I can learn.

Some things I’m trying to find out:

  • Where/how is webpack configured in projects created using vapid-cli?
  • Should the vapid start command and associated script replace the npm run serve webpack script I usually use with Vue apps?
  • Will Vapid work while running Vue in SPA mode?
  • Should I try to construct my project all in a single directory, or should I separate out my Vue project and related files from Vapid, and just pass the wepback-built contents of dist into www?

I’d really appreciate even just a point in the right direction. Thanks!


#2

@alec: Thanks for bringing this up—it’s a great topic.

Firstly, I think you’re right about Nuxt (and possibly vapid-cli) in that they’d be dueling development environments.

Regarding passing the contents of dist to www, that might work, although you’d still be left with having to manage two dev environments.

My gut says that the best way to develop with Vue and Vapid would be to add Vue as a package to your Vapid app (i.e. npm install vue inside of the project directory), and then use /javascripts/site.pack.js as your starting point. One problem though: Vapid’s webpack config doesn’t know how to deal with .vue files. I tried setting up a test Vue project, and got error messages:

ERROR in ./www/javascripts/App.vue 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
> <template>
|   <div id="app">
|     <img alt="Vue logo" src="./assets/logo.png">
 @ ./www/javascripts/site.pack.js 2:0-27 7:17-20
 @ multi ./www/javascripts/site.pack.js

Maybe the solution is figuring out a way to extend the Webpack build chain?

Or a (short-term, workaround) option might be to develop a Vue app without components. e.g.,

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue Webpack Demo</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
  <div id="mainContent" v-text="message"></div>

  <script type="text/javascript">
    var comp = new Vue({
      el: '#mainContent',
      data: {
          message: 'Hello Vue!'
      },
    });
  </script>
</body>
</html>

#3

Hi Scott, thanks so much for the detailed answer.

I agree that adding Vue as package to an app created with vapid-cli is probably the best and cleanest route.

Extending the Webpack build chain seems to be the ultimate solution to making this pairing — the ability to manually add the packages and loaders that vue-cli pre-installs to the Vapid environment (such as vue-loader, which enables the use of .vue single-file-components) would enable a full Vue environment with a bit of setup.

I’ll do some more tinkering and post my results when I have time. Thanks for your assistance and hard work!


#4

I’m interested to hear of any results you achieve.


#5

Hi Clark, thanks for letting me know. I’ve been busy as of late with not as much time to test. I might have some time this weekend to play around. I will be sure to post my findings here when I do get around to it, be it then or after.