Previous Step

Demo

Build the Solution

Run npm run build to build the vue-demo-app.js output file.

The size of the dev build will be MUCH larger then the production build. The minified bundle size is ~1.79MB.

Copy the Assets

Access the SharePoint site, based on our configuration we will go to the /sites/dev site collection. Access the Site Assets library, and create a sp-dashboard-vue folder. Copy the files to this folder.

Create the Dashboard Page

Access the "Pages" library and add a new "Web Part Page". Store it in the "Site Assets" library, and use the "Move To" function to place it under the sp-dashboard-vue folder. We will need this added prior to installing the solution.

Deploy the Solution

Ensure you are in Classic Mode, if you are testing this in a SharePoint Online environment.

Press F-12 to access the browser's developer tools, and access the Console tab. First we will reference the library, next we will install the core library and finally add the list.

1. var s = document.createElement("script"); s.src = "/sites/dev/siteassets/sp-dashboard-vue/sp-dashboard-vue.js"; document.head.appendChild(s);
2. SPDashboard.Configuration.install();
3. SPDashboard.Configuration.addToPage("/sites/dev/siteassets/sp-dashboard-vue/dashboard.aspx");

Demo

Refreshing the page will display a blank table

Create an Item

Click the "New Item" button to display the create view

After saving the item, the dashboard will be displayed with the new item that was created

View/Edit an Item

Clicking the Edit Icon will display the view form

Clicking the Edit button will display the edit form

Uninstall the Solution

To uninstall the solution, run the following commands in the console browser:

VueJSDemo.Configuration.uninstall()