Todo App example with SN7, Vue.js and Redux

---

This package is not under active development. You can find our latest packages in the sensenset/sn-client monorepo.

---

This example is simple todo app built with Vue+Redux upon sensenet ECM which has been prepared to demonstrate how to use the new sensenet ECM related libraries sn-client-js and sn-redux.

Quick start

$ git clone https://github.com/SenseNet/sn-vue-redux-todo-app.git
$ cd sn-vue-redux-todo-app
$ npm install
$ npm run dev

Settings

To use this example you'll need a sensenet ECM portal. To connect the app with the portal set your site's url as the app's siteUrl

import { SetSiteUrl } from 'sn-client-js';

SetSiteUrl('https://mysite.com');

Go to your portal's Portal.setting (/Root/System/Settings/Portal.settings) and check the allowed origins. To get the app working you have to add the app's domain as an allowed origin so that the app can send requests to the portal and get or set data.

{
   AllowedOriginDomains: [ "localhost:13505" ]
}

For further information about CORS in Sense/Net ECM check this article.

The example app uses one of the built-in TaskList Content in the default sensenet ECM install (/workspaces/Project/budapestprojectworkspace/Tasks). If you removed this Content and its children tasks earlier or want to try with another TaskList change the value of the rootUrl variable in AddTodo.vue and App.vue to the chosen list's path.

The example app demonstrates not only how to fetching data but also Content creation and delete. The app doesn't provide authentication because of it's simplicity so you have to make some permission changes in your sensenet ECM portal to let Visitor users adding and removing tasks from the chosen parent list. If you are not familiar with sensenet ECM's permission system check the following wiki articles:

• sensenet ECM Permission System
• How to set permissions on a content in Sense/Net ECM

Related documents

• sn-client-js API reference
• sn-redux API reference
• Redux
• Getting Started with Redux
• Vue.js

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

For detailed explanation on how things work, checkout the guide and docs for vue-loader.