Shopify Theme Lab

JS Frameworks

Remove Vue

  1. Remove all Vue packages.
npm uninstall vue vuex vue-loader @vue/compiler-sfc
1
yarn remove vue vuex vue-loader @vue/compiler-sfc
1
  1. Remove src/vue directory.
rm -r src/vue
1
  1. Remove everything from src/main.js except for import './css/main.css'
import './css/main.css'
1
  1. Remove Vue from .eslintrc.js.
module.exports = {
  extends: [
    ...
-   'plugin:vue/vue3-recommended'
  ],
  plugins: [
-   'vue'
  ]
  ...
}



 


 



1
2
3
4
5
6
7
8
9
10
  1. Remove Vue from webpack.common.js.
...
- const webpack = require('webpack')
- const { VueLoaderPlugin } = require('vue-loader')
...

module.exports = {
  ...
  module: {
    rules: [
-     {
-       test: /\.vue$/,
-       loader: 'vue-loader'
-     }
      ...
    ]
  },
  plugins: [
    ...
-   new VueLoaderPlugin(),
-   new webpack.DefinePlugin({
-     __VUE_OPTIONS_API__: 'true',
-     __VUE_PROD_DEVTOOLS__: 'false'
-   })
  ]
}

 
 






 
 
 
 





 
 
 
 
 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

Alpine.js

Alpine.jsopen in new window is a rugged, minimal tool for composing behavior directly in your markup.

  1. Install alpinejs.
npm install alpinejs
1
yarn add alpinejs
1
  1. import alpinejs into src/main.js
import Alpine from 'alpinejs'

window.Alpine = Alpine

Alpine.start()
1
2
3
4
5