ipyvuelink-example-1

1 - Bootstapping

This project is generated via @vue/cli with the following manually selected features:

• Babel
• Linter/Formatter
• ESLint + Prettier
• Lint on save
• config in dedicated files

Then the following extra configuration was applied:

• add vuetify plugin:

  • vue add vuetify with default options

• remove vuetify-loader:

  • yarn remove vuetify-loader

• add dev packages yarn add -D xxx:

  • @vue/eslint-config-prettier

• .eslintrc.js extra config - see comments
• .prettierrc.js extra config - see comments
• vue.config.js extra config - see comments

Tip: With VSCode create a custom shortcut for doc formatting different from the standard Alt+Shift+F (say Alt+Shift+G) to avoid conflicts.

2 - Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Run your tests

yarn test

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.

2 - Use ipyvuelink

Cf. ipyvuelink repo

1 - Get ipyvuelink

In terminal:

# first download
git submodule add https://github.com/mariobuikhuizen/ipyvuelink.git

# after a git clone
git submodule update --init

1 - Develop

You need several terminals:

# TERMINAL 1
# regular vue dev
yarn serve

# TERMINAL 2
# ipyvuelink cli one time commands
ipyvuelink/cli dev-install-extension
ipyvuelink/cli watch-vue-project

# TERMINAL 3
ipyvuelink/cli watch-extension

# TERMINAL 4
# launch notebook
jupyter notebook

# TERMINAL 5
# launch jupyterlab
jupyterlab --watch
# DOES NOT WORK