Frontend Plugins
Custom Frontend Plugins For Speckle! • Last modified on 2/5/2020 • edit

There are two main ways to add functionality to Speckle. One is by creating a new, fully fledged front end application, like SpeckleAdmin, with the stack of your choice. The other, more recent one, is to add custom components to SpeckleAdmin itself that do whatever magic you want them to do. This way you're restricted to Vuejs, but you're getting the benefits of what's already there in the speckle web app. We'll start with the latter, as it's more approachable.

SpeckleAdmin Plugin Development

The ./src/plugins folder is scanned for components that will be added dynamically to SpeckleAdmin's /plugins route.

  • Only components that have the prefix plugin- will be added, so it's important that your parent component follow this naming pattern!
  • We parse PascalCase to kebabCase to get the route path, so make sure your Vue component is named appropriately.
  • E.g. a Vue component with filename plugin-FirstPlugin.vue and a name: 'FirstPlugin' property will be served at /plugins/first-plugin

Here's an example plugin .vue file. First, the html template:

  <template>
    <div>
      <div class='display-1 ma-5 pa-5'>
        Hi, {{$store.state.user.name}}. Welcome to Plugin B.
      </div>
      <div class='headline font-weight-thin mx-5 px-5'>
        This is a sample plugin for the frontend.
      </div>
    </div>
  </template>

And then, script part:

 <script>
   export default {
     name: 'Sample Plugin',
     manifest: {
       humanReadableName: "Sample Plugin",
       description: "Something witty.",
       requireAuth: false,
       icon: "flight_land", // from: https://material.io/resources/icons/
       registerInNav: true
     },
     created( ) {
       console.log( 'Plugin A created!' )
     }
   }
   </script>

Notes:

  • you have full access to the SpeckleAdmin's store, where the user is stored, as well as streams, projects, etc.
  • the custom manifest field describes your plugin. You can even change the icon for the side bar navigation!
  • you can control wether anonymous users can use it via the requireAuth flag.

From Scratch Speckle Front End App

This is a longer route to take, but gives you full control over what's happening. The best way to start is by forking the SpeckleAdmin repo and looking how it's structured, how it handles multi-server authentication, etc.

If you want to write a tutotrial, by all means go ahead and let us know!