loading...

Setting up a dev environment for Vue with Parcel and Babel

roggc profile image roggc Updated on ・2 min read

To set up a dev environment for Vue with Parcel and Babel it's very easy. First, you create a project folder named vue1. Inside of it you initialize a project with npm init -y. Then you install Parcel, Vue and Babel in that order (Parcel before Vue) with npm i parcel-bundler parcel-plugin-clean-dist vue @babel/core @vue/babel-preset-jsx @vue/babel-helper-vue-jsx-merge-props. Then you edit your package.json file and add the following:

  "alias": {
    "vue" : "./node_modules/vue/dist/vue.common.js"
  }

Finally, you edit a '.babelrc' file:

{
  "presets": ["@vue/babel-preset-jsx"]
}

That's it, you are good to go!
Now you develop.
You can create a folder named src with the following contents:
--|src
    --|components
        --app.js
    --favicon.ico
    --index.html
    --main.js
index.html file will be as follows:

<html>
<head>
  <meta charset="utf-8">
  <link rel="shortcut icon" href="favicon.ico" />
  <title>my app 🥳</title>
</head>
<body>
  <div id="app"></div>
  <script src='main.js'></script>
</body>
</html>

main.js file will be as follows:

import {App} from './components/app'

new App({
  propsData: {
    name: 'Vue.js'
  },
  el:'#app'
})

And app.js will be as follows:

import Vue from 'vue'

export const App=Vue.extend({
  props:{
    name:String
  },
  render(){
    return (
      <div>Wellcome to {this.name}</div>
    )
  }
})

To start dev server you run npx parcel src/index.html and browse to localhost:1234 to see your Vue app in action with life reloading.
To build your app you run npx parcel build src/index.html. This will create dist folder with output files in it that you can deploy into a hosting service.
Alternatively, you can write scripts start and build in package.json as parcel src/index.html and parcel build src/index.html and run them with npm start and npm run build.

Discussion

pic
Editor guide
Collapse
therealgrinny profile image
Connor

I primarily use webpack when I work with Vue. So there's a separate src folder which can hold multiple .Vue files. That's my go-to method.

I'm assuming the object notation in app.js will let you define the components code too? I haven't seen it done this way before.

Which style do you think is more useful / good practice?

Collapse
roggc profile image
roggc Author

It's up to you. The thing here is Parcel or Webpack? I think Parcel is more straight than Webpack and will allow you to still work the way you do with Vue (or choose to).

Collapse
therealgrinny profile image
Connor

It definitely looks like much less of a pain in the butt to set up. I've had a lot of misadventures with dependency problems with webpack. I'll try it out with a new project!

Collapse
durkhaima profile image
durkhaima

I want to load all images from an assets folder and traverse through that collection in my I am not using webpack, just using parcel .... and not able to find a way to do this. Is it only possible via webpack as parcel does not have bundling of this sort ?

Collapse
alansolitar profile image
Alan Solitar

Interesting article. I've never used parcel before. I've only really used webpack.