An Alteryx Connector built with Vue.js and Vuetify

This connector was developed using the increasingly popular Vue.js JavaScript framework alongside a UI framework known as Vuetify - which was built specifically for Vue.js and follows Material Design guidelines.

The result is a beautiful, responsive, performant example of the first Alteryx tool developed using the progressive Vue.js library.

Vue.js is the perfect lightweight JavaScript framework for use within the Alteryx HTML/JavaScript SDK - especially when performance is a priority and you're interested in a simple GetConfiguration/SetConfiguration setup. Vue.js also has excellent state-management package integration, making data persistence completely painless. Throw in a lightweight UI and axios (promise-based HTTP client) and building sleek, agile connectors in Alteryx is a cinch!

Requirements

• NodeJS/npm

Installation

A compiled build can be installed with the .YXI installer here or by downloading from the Alteryx Gallery. Use the instructions below for installing from source.

Alteryx will typically install tools in one of the following locations...

C:\Users\{user}\AppData\Roaming\Alteryx\Tools
C:\Program Files\Alteryx\bin\HtmlPlugins
C:\ProgramData\Alteryx\Tools

Choose a location, clone and cd to project

# as of Designer 2018.1 this is the preferred global directory
cd C:\ProgramData\Alteryx\Tools

# clone 
git clone https://github.com/alteryx-vue/nyt-connector

# cd to project
cd nyt-connector

Build Setup & Testing

install dependencies

npm install

Dev Environment Testing

You can use npm run dev to serve the project with hot reload for testing in a browser.

limited functionality in browser - use for Vue component and/or state management debugging, etc.

Note: When using Chrome, be sure to make use of the Vue.js Devtools Extension

Build Production

Webpack and such..

# build & compile
npm run build

Webpack vue-loader is used for compiling .vue files.