Your StdLib Vue App

Welcome to your StdLib Vue template!

The Vue template is designed to make creating and running Vue.js single page apps (SPAs) easy. The advantages of using StdLib here are the same for any other StdLib service: built in scalability without managing infrastructure.

Local Development

From your service's main directory, run lib http to start a temporary HTTP server. You can then open http://localhost:8170/<username>/<appname> and see a sample app ready to go! Source files are automatically compiled when you boot up the server, and are recompiled upon changes you make to them.

Deployment

Deployment works the same way as other StdLib services. Running lib up dev will deploy your service to a dev environment, which you can access at:

<username>.stdlib.com/<service name>@dev

Running lib release (once you're ready) will create an immutable version of the service at:

<username>.stdlib.com/<service name>

The endpoint will appear in the StdLib registry unless publish: false is set in your app's package.json file.

If you would like to tear down a release of your app, run the following command from your app directory:

// Development environments
lib down dev

// Release environments
lib down -r <version>

App Structure

StdLib creates several directories when using the vue template. Unlike other services you may have created, you'll be leaving the functions directory alone during development -- the functions inside are preconfigured to handle your SPA. Instead, you'll be working in the app directory. This directory contains a folder for static assets and a folder called vue that will contain the logic and styling for your SPA.

Important note: When referencing a static file from a template, you must reference it via the url static/<path>. This will access files that you add to the app/static directory of your project. The sample app generated by the template has examples of this.

StdLib sets up a single-file component structure set up by default, but you are free to structure your app however you'd like. We also preconfigure Sass for styling and the Vue router for navigation to make development easier. Router configuration for different pages of your app should be configured in the router.js file. See the generated file for examples.

Environment Variables

Environment variables specified in the env.json file can be referenced from your app code by using the global env variable. For example, if your env.json file looks like this:

{
  "local": {
    "key": "local_development_key"
  },
  "dev": {
    "key": "development_key"
  },
  "release": {
    "key": "production_key"
  }
}

You could reference key as env.key in your Javascript.

If you want to access an environment variable in a Vue component template, you'll have to add the env object to your component's model like this:

<style lang="sass">
  // Styling goes here
</style>

<template>
  <div class="team-members-cell">
    Here's the value of env.key: {{ env.key }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      env: env
    };
  }
}
</script>

Important reminder: Environment variables you set will be visible to anyone accessing your SPA (it's front end code after all!) so make sure you don't store any sensitive or secret information as environment variables

The Compilation Process

StdLib automatically sets up Babel and Webpack to compile your app by generating a webpack.config.js file and a .babelrc file. A development build runs whenever you run an HTTP server with lib http, and a minified production build runs when you deploy an app with lib up. The compilation output goes to another folder called static in the service directory.

Further Reading

• Vue Documentation
• Vue Router Documentation
• Sass Documentation
• Webpack Documentation
• Babel Documentation

Acknowledgements

We would like to thank Evan You for creating a wonderful product in Vue. He has built Vue largely by himself, and relies on donations. Check out his Patreon here.