Neutrino Vue Preset
- Zero upfront configuration necessary to start developing and building a Vue web app
- Modern Babel compilation.
- Extends from @neutrinojs/web
- Modern Babel compilation supporting ES modules, last 2 major browser versions, async functions, object rest spread syntax, and dynamic imports
- webpack loaders for importing HTML, CSS, images, icons, fonts, and web workers
- webpack Dev Server during development
- Automatic creation of HTML pages, no templating necessary
- Automatic stylesheet extraction; importing stylesheets into modules creates bundled external stylesheets
- Pre-configured to support CSS Modules via
- Hot Module Replacement support including CSS
- Tree-shaking to create smaller bundles
- Production-optimized bundles with Babel minification, easy chunking, and scope-hoisted modules for faster execution
- Easily extensible to customize your project as needed
- Node.js v6 LTS, v8, v9
- Yarn v1.2.1+, or npm v5.4+
- Neutrino v8
@neutrinojs/vue can be installed via the Yarn or npm clients. Inside your project, make sure
@neutrinojs/vue are development dependencies. You will also need Vue for actual
❯ yarn add --dev neutrino @neutrinojs/vue❯ yarn add vue
❯ npm install --save-dev neutrino @neutrinojs/vue❯ npm install --save vue
@neutrinojs/vue follows the standard project layout specified by Neutrino. This
means that by default all project source code should live in a directory named
src in the root of the
to import your compiled project.
The fastest way to get started is by using the
create-project scaffolding tool.
Don’t want to use the CLI helper? No worries, we have you covered with the manual installation.
Run the following command to start the process. Substitute
<directory-name> with the directory name you wish to create
for this project.
❯ yarn create @neutrinojs/project <directory-name>
create command is a shorthand that helps you do two things at once. See the Yarn create docs for more details.
npx comes pre-installed with
npm. If you’re running an older version of
npm install -g npm to update to the latest version.
❯ npx @neutrinojs/create-project <directory-name>
The CLI helper will prompt for the project to scaffold, and will offer to set up a test runner as well as linting to your project. Refer to the Create new project section for details on all available options.
After installing Neutrino and the Vue preset, add a new directory named
src in the root of the project, with
App.vue in it.
❯ mkdir src && touch src/index.js && touch src/App.vue
This Vue preset exposes an element in the page with an ID of
root to which you can mount your application. Edit
src/index.js file with the following:
Next, edit your
src/App.vue with the following:
Now edit your project's package.json to add commands for starting and building the application:
If you are using
.neutrinorc.js, add this preset to your use array instead of
moduleexports =use: '@neutrinojs/vue';
❯ yarn start✔ Development server running on: http://localhost:5000✔ Build completed
❯ npm start✔ Development server running on: http://localhost:5000✔ Build completed
Start the app, then open a browser to the address in the console:
@neutrinojs/vue builds static assets to the
build directory by default when running
neutrino build. Using
the quick start example above as a reference:
❯ yarn build✔ Building project completedHash: b26ff013b5a2d5f7b824Version: webpack 3.5.6Time: 9773msAsset Size Chunks Chunk Namesindex.dfbad882ab3d86bfd747.js 181 kB index [emitted] indexruntime.3d9f9d2453f192a2b10f.js 1.51 kB runtime [emitted] runtimeindex.html 846 bytes [emitted]✨ Done in 14.62s.
You can either serve or deploy the contents of this
build directory as a static site.
If you wish to copy files to the build directory that are not imported from application code, you can place
them in a directory within
static. All files in this directory will be copied from
build/static. To change this behavior, specify your own patterns with
@neutrinojs/web preset loads assets relative to the path of your application by setting Webpack's
./. If you wish to load
assets instead from a CDN, or if you wish to change to an absolute path for your application, customize your build to
output.publicPath. See the Customizing section below.
You can provide custom options and have them merged with this preset's default options to easily affect how this
preset builds. You can modify Vue preset settings from
.neutrinorc.js by overriding with an options object. Use
an array pair instead of a string to supply these options in
The following shows how you can pass an options object to the Vue preset and override its options. See the Web documentation for specific options you can override with this object.
moduleexports =use:'@neutrinojs/vue'/* preset options */// Example: disable Hot Module Replacementhot: false// Example: change the page titlehtml:title: 'Epic Vue App'// Target specific browsers with babel-preset-envtargets:browsers:'last 1 Chrome versions''last 1 Firefox versions'// Add additional Babel plugins, presets, or env optionsbabel:// Override options for babel-preset-env:presets:'babel-preset-env'modules: falseuseBuiltIns: trueexclude: 'transform-regenerator' 'transform-async-to-generator';
To override the build configuration, start with the documentation on customization.
@neutrinojs/vue creates some conventions to make overriding the configuration easier once you are ready to make
changes. Most of the configuration for
@neutrinojs/vue is inherited from the
@neutrinojs/web preset; continue to that documentation
for details on customization.
By default Neutrino, and therefore this preset, creates a single main
index entry point to your application, and
this maps to the
index.* file in the
src directory. The extension is resolved by webpack. This value is provided by
neutrino.options.mains.index. This means that the Web preset is optimized toward the use
case of single-page applications over multi-page applications. If you wish to output multiple pages, you can detail
all your mains in your
moduleexports =options:mains:index: 'index' // outputs index.html from src/index.*admin: 'admin' // outputs admin.html from src/admin.*account: 'user' // outputs account.html from src/user.*use: '@neutrinojs/vue'
The following is a list of additional rules and their identifiers this preset defines, in addition
to the ones provided by
@neutrinojs/web, which can be overridden:
|Name||Description||Environments and Commands|
||Compiles Vue files from the
This preset does not define any additional plugins from those already in use by
By following the customization guide and knowing the rule, loader, and plugin IDs from
@neutrinojs/web and above, you can override and augment the build by providing a function to your
array. You can also make these changes from the Neutrino API in custom middleware.
By defining an entry point named
vendor you can split out external dependencies into a chunk separate
from your application code.
Example: Put Vue into a separate "vendor" chunk: