vue.jssnowpack

Change default directory in Snowpack Vue app

I want to use Snowpack for my Vue 3 app. Currently, I've initialized the Vue 3 app using the following command:

npx create-snowpack-app my-app --template @snowpack/app-template-vue

By default, Snowpack creates a directory structure like this:

public/
src/
  App.vue
  index.js
package.json
README.md
snowpack.config.js

I need to restructure things slightly. The reason why is I'm moving an existing app to Snowpack. My challenge is I need to move to a structure like this:

public/
pages/
  App.vue
index.js
package.json
README.md
snowpack.config.js

In short: 1) rename src to pages and 2) move index.js up to the same level as package.json. When I make this change, Snowpack throws a warning that says "mounted directory does not exist". It prints out the files it's looking for, which, Snowpack is clearly still looking in the src directory. My thinking was to review the snowpack.config.js file.

I looked at the mount property in the snowpack.config.js file. I changed mount.src.url to /pages. However, that didn't work. I also tried changing the property to just /, which also didn't work.

What do I need to change to tell Snowpack to look in the current directory instead of the src directory for the index.js file?

Solution

  • That directory layout is possible with a mount config that specifies . as the mount point:

    // snowpack.config.js
module.exports = {
  mount: {
    '.': {url: '/dist'}
  },
}

    Then the root index could import the SFC from <projectRoot>/pages/:

    // <projectRoot>/index.js
import App from './pages/App.vue'
...