Code Sharing with Vue.js

Jen Looper

Senior Developer Advocate, Progress


Sharing code between your web and mobile apps

A brief history!

Two brave knights

Tiago Alves

Igor Randjelovic

A damsel in distress

Lol I need a code sharing talk STAT

Sallying forth to create a good way to share code

Lol ok, have fun!

Chapter 1: PR Vue

Chapter 2: fork the Vue-Loader and make it work for us

Code Structure

<template web>
    <div class="SealGallery">
        <ul style="padding: 0;">
            <li v-for="seal in seals" :key="" 
                style="list-style: none; border-bottom: 1px solid #e0e0e0;">
                <div style="display: flex; align-items: center; padding: 10px">
                    {{ }}

<template native>
        <ListView :items="seals">
                <StackLayout orientation="horizontal">
                    <Label :text="" style="vertical-align: center;padding: 10px;"/>

NativeScript-Vue-Loader picks out the pieces to compile


Chapter 3: make webpack do the work

Code Structure

SFCs go here, with naming convention set

Entry points

Shared service

Global styles

SFC structure

  <Page class="Page">
      <ActionBar title="🐕🐩🐕🐩🐕🐩🐕🐩🐕🐩🐕🐩🐕🐩" class="action-bar" />
      <WrapLayout orientation="horizontal">
          <StackLayout v-for="dog in dogsList" :key="dog" class="card">
              <Image height="100%" width="48%" stretch="aspectFill" :src="dog" />
  <v-container grid-list-md fluid>
    <v-layout wrap>
      <v-flex xs6 sm4 md2 v-for="(dog, index) in dogsList" :key="dog">



Entry Points:web


import Vue from 'vue';
import router from 'vue-router';
import Home from './components/Home';
import Vuetify from 'vuetify';

import './styles';

Vue.use(Vuetify, {
  theme: {
    primary: '#3f51b5',
    secondary: '#b0bec5',
    accent: '#8c9eff',
    error: '#b71c1c'

new Vue({
  el: '#app',
  render: h => h(Home),

Entry Point:mobile


import Vue from 'nativescript-vue';
import Home from './components/Home';

import './styles';

// Uncommment the following to see NativeScript-Vue output logs
Vue.config.silent = false;

new Vue({

  render: h => h(Home),


SFC Script: identical

import service from "../shared/service.vue";

  export default {
    mixins: [service],
    created() {

Shared Service


import axios from "axios";

export default {
   data () {
      return {
        dogsList: []
    methods: {
        loadDogs() {
              .then(response => {
                this.dogsList =;
              .catch(error => {


page-specific scoped, or global

<style scoped>
  Page {
      background-color: #ffffff;
  .action-bar {
    background-color: #303F9F;
    color: #C5CAE9;
    margin: 5;
    color: white;
    border-radius: 5;

// NativeScript core theme
@import '~nativescript-theme-core/scss/skins/light/index';
@import '~nativescript-theme-core/scss/index';

The result! 🐶

going forward

"vue add


Get ready for Vue 3 and the accompanying Vue CLI 3.x 

  • Vue 3 will make it easier for third party folks like us to develop a custom renderer
  • The Vue CLI will allow easy creation of extensions via plugins so we can extend the CLI if you need to 'bolt on' a mobile app to your existing Vue web app
  • Creation of the Vue CLI 3 plugin is in process - most parts done, only webpack part to be completed:

Thank you, kind sir, for the NativeScript-Vue implementation.

Hon, you look like you need a drink

Code Sharing with Vue.js

By Telerik DevRel

Code Sharing with Vue.js

for webinar

  • 2,562