Shopify Vue
Starter repository for Shopify/Vue theme development
Features
- Nested folder structures
- PostCSS/ES6 processing
- Live reload w/ BrowserSync
- Full Vue/Vuex support
Setup
To get started clone the repository.
git clone https://github.com/alexcasche/shopify-vue.git
Install the depencies
yarn install
Run zip command and create new theme in Shopify from theme.zip.
yarn run zip
Add config.yml with your theme settings.
development:
password: [DEV_PASSWORD]
theme_id: [DEV_THEME]
store: [DEV_SHOP]
ignore_files:
- settings_data.json
Update browserSync.js with your Shopify info
const browserSync = require("browser-sync");
const BASE_URL = "[DEV_SHOP]";
const PREVIEW_QUERY = "?preview_theme_id=[DEV_THEME]";
browserSync({
proxy: `${BASE_URL}${PREVIEW_QUERY}`,
files: "browserUpdate.js"
});
Run start command and local changes will be pushed.
yarn start
Development
If your Shopify theme is up to date with you local project, run the watch command instead of start.
yarn watch
Vue Integration
All Vue files will live under the src/vue directory. Vue comopnents can be mounted anywhere in shopify and can be passed external props from liquid.
<vue-custom-element prop="{{ liquid_var }}"></vue-custom-element>
Notes
The browserUpdate.js file is used to trigger BrowserSync reloads. It should not be edited.
Resources
This repo utilizes the awesome library vue-custom-element.