Starting Logux Vuex Project

In this section, we will create a UI client for Logux with Logux Vuex.

Server

Before starting the client, you need to create Logux Server:

Creating the Project

Install Node.js.

You will need a bundler to compile npm packages into JS bundle. Webpack or Vite is excellent for it. Since Vuex is a official flux-like state management library for Vue.js, we will use Vue as core framework of application. To create a project with a single command, we will use Vue CLI.

npx @vue/cli create client-logux
cd client-logux

Adding Vuex

If you have chosen the default Vue CLI preset, then you have not yet installed Vuex. You can install it via Vue CLI:

npx @vue/cli add vuex

Or manually, as described in Vuex documentation.

Adding Logux Vuex

Install Logux Vuex:

    • npm i @logux/core @logux/client @logux/vuex

    Edit src/store/index.js:

    import { createStore } from 'vuex'
import { CrossTabClient } from '@logux/client'
import { createStoreCreator } from '@logux/vuex'

const client = new CrossTabClient({
  server: process.env.NODE_ENV === 'development'
    ? 'ws://localhost:31337'
    : 'wss://logux.example.com',
  subprotocol: '1.0.0',
  userId: 'anonymous',  // TODO: We will fill it in Authentication recipe
  token: ''  // TODO: We will fill it in Authentication recipe
})

const createStore = createStoreCreator(client)

export default createStore({
const store = createStore({
  state: {},
  mutations: {},
  actions: {},
  modules: {}
})

store.client.start()

export default store

    Synchronization UI

    To see the state of the synchronization process, we will add some helpers. They are all optional, but they are great for a start.

    Install Logux Client:

    • npm i @logux/client

    Change src/store/index.js:

    import { CrossTabClient } from '@logux/client'
import { CrossTabClient, badge, badgeEn, log } from '@logux/client'
import { badgeStyles } from '@logux/client/badge/styles'
import { createStoreCreator } from '@logux/vuex'
    badge(store.client, { messages: badgeEn, styles: badgeStyles })
log(store.client)

store.client.start()

    Check the Result

    1. Open two terminals.
    2. Start your Logux server in one terminal by npm start in server directory.
    3. Start your client in the second terminal by npm start in client directory.