VueNeue

Vue CLI plugins

Here are some tips to use some other Vue CLI plugins with VueNeue

WARNING

Work in progress !

I'll try to make this plugins compatible without any code change on your side.

I'm waiting for this issues to be implemented in Vue CLI:

PWA

TIP

You don't need to do this if you add or invoke @vueneue/ssr after @vue/pwa

The PWA built-in plugin will normally include registerServiceWorker.js in src/main like this:

import './registerServiceWorker';

But this is not compatible with SSR, so you need to include it only on client side :

if (process.client) {
  require('./registerServiceWorker');
}

In your vue.config.js please add this:

module.exports = {
  pwa: {
    workboxOptions: {
      templatedUrls: {
        '/': 'index.ssr.html',
      },
    },
  },
};

TypeScript

TIP

You don't need to do this if you add or invoke @vueneue/ssr after @vue/typescript

In src/main.ts you need to any to first argument passed to exported default function:

 







export default ({ router, store }: any) => {
  return new Vue({
    router,
    store,
    render: h => h(App)
  });
}

You need to add a path to your tsconfig.json, if you want to use Vue class components helper:

{
  "compilerOptions": {
    "paths": {
      "neuets": "node_modules/@vueneue/ssr-core/neuets"
    }
  }
}

Vue i18n

TIP

You don't need to do this if you add or invoke @vueneue/ssr after i18n plugin

  1. In src/i18n.js created by i18n plugin, change default export by this:
export default () => {
  return new VueI18n({
    locale: process.env.VUE_APP_I18N_LOCALE || 'en',
    fallbackLocale: process.env.VUE_APP_I18N_FALLBACK_LOCALE || 'en',
    messages: loadLocaleMessages(),
  });
};
  1. In src/main.js
 





 




import createI18n from './i18n';

export default ({ router, store }) => {
  return new Vue({
    router,
    store,
    i18n: createI18n(),
    render: h => h(App)
  });
}

Apollo

TIP

You don't need to do this if you add or invoke @vueneue/ssr after apollo

WARNING

But if you invoke apollo after @vueneue/ssr you need to modify a lots of things.

  1. Include @/plugin/apollo to neue.config.js
module.exports = {
  plugins: {
    apollo: '@/plugins/apollo',
  },
};
  1. Change code in src/vue-apollo.js like this:
 
 



 
 

 
 
 
 
 
 


 
 



 
 







 
 





 
 




// Add this import:
import { getAuth } from './plugins/apollo';

// ...

// Remove this line
Vue.use(VueApollo);

// Add this condition
if (!Vue.prototype.hasOwnProperty('$filesRoot')) {
  Object.defineProperty(Vue.prototype, '$filesRoot', {
    get: () => filesRoot,
  });
}

const defaultOptions = {
  // Change this value:
  ssr: !!process.server,
};

export function createProvider(options = {}) {
  // Add this line:
  defaultOptions.getAuth = getAuth(AUTH_TOKEN, options.ctx);

  // ...

  return apolloProvider;
}

export async function onLogin(apolloClient, token) {
  // Replace localStorage line by this:
  if (process.client) require('js-cookie').set(AUTH_TOKEN, token);

  // ...
}

export async function onLogout(apolloClient) {
  // Replace localStorage line by this:
  if (process.client) require('js-cookie').remove(AUTH_TOKEN);

  // ...
}

If you want authentication works properly on server side just add this following code to neue.config.js

const cookies = require('koa-cookie');

module.exports = {
  ssr: {
    server(app) {
      app.use(cookies());
    },
  },
};

← How to →