Skip to content

A starter project for Shopify, using Vue.js and Tailwindcss

License

Notifications You must be signed in to change notification settings

JakeHenshall/Shopify-Tailwind-Vue

Repository files navigation

slate-tailwind-vue

This is a vue starter template for slate, it is based on Shopify's starter template

Thanks to @dan-gamble for helping with the slate configurations

Thanks to @liron-navon for the initial Vue.js Config

This project is based off shopify/skeleton-theme, checkout Slate for more information.

get started

$ npm create slate-theme my-new-theme JakeHenshall/Shopify-Tailwind-Vue

or

$ yarn create slate-theme my-new-theme JakeHenshall/Shopify-Tailwind-Vue

How to work with slate for Shopify:

  • rename .env.example to .env and setup your development store config.

  • build a local SSL certificate with npm run mkcert

  • run: npm start

  • slate will open your localhost, just ignore that, and go to your development store.

  • In the development store you should have your theme loaded

  • Changes will hot reload in the dev store.

Using vue in shopify

  • Do notice that this is not meant to be an SPA, for that you can use storefront, vue here is purely to replace JQuery for logic operations and animations.

You can mount components in vue/app.js

Vue.component('example-component', require('./components/ExampleComponent.vue').default);

You can render the vue template in the following manner

<example-component shopName="{{ shop.name }}"></example-component>

About

A starter project for Shopify, using Vue.js and Tailwindcss

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published