<li><p><strong>See also:</strong></p>

display: none;

padding-left: 0;

}

.sidebar {

position: fixed;

z-index: 8;

display: none;

padding-left: 0;

}

.sidebar {

position: fixed;

z-index: 8;

left: 140px;

}

}

#ad {

width: 100%;

}

padding: 1.2em 1em;

}

.content.with-sidebar {

}

.footer {

margin-left: 0;

<p class="tip">Do NOT do <code>import Vue from &#39;vue/dist/vue.js&#39;</code> - since some tools or 3rd party libraries may import vue as well, this may cause the app to load both the runtime and standalone builds at the same time and lead to errors.</p>

<h3 id="CSP-environments"><a href="#CSP-environments" class="headerlink" title="CSP environments"></a>CSP environments</h3><p>Some environments, such as Google Chrome Apps, enforce Content Security Policy (CSP), which prohibits the use of <code>new Function()</code> for evaluating expressions. The standalone build depends on this feature to compile templates, so is unusable in these environments.</p>

<h2 id="CLI"><a href="#CLI" class="headerlink" title="CLI"></a>CLI</h2><p>Vue.js provides an <a href="https://github.com/vuejs/vue-cli" target="_blank" rel="external">official CLI</a> for quickly scaffolding ambitious Single Page Applications. It provides batteries-included build setups for a modern frontend workflow. It takes only a few minutes to get up and running with hot-reload, lint-on-save, and production-ready builds:</p>

<figure class="highlight bash"><table><tr><td class="code"><pre><div class="line"><span class="comment"># install vue-cli</span></div><div class="line">$ npm install --global vue-cli</div><div class="line"><span class="comment"># create a new project using the "webpack" template</span></div><div class="line">$ vue init webpack my-project</div><div class="line"><span class="comment"># install dependencies and go!</span></div><div class="line">$ <span class="built_in">cd</span> my-project</div><div class="line">$ npm install</div><div class="line">$ npm run dev</div></pre></td></tr></table></figure>

<h2 id="Dev-Build"><a href="#Dev-Build" class="headerlink" title="Dev Build"></a>Dev Build</h2><p><strong>Important</strong>: the built files in GitHub’s <code>/dist</code> folder are only checked-in during releases. To use Vue from the latest source code on GitHub, you will have to build it yourself!</p>

<h4 id="Replacing-the-uppercase-Filter"><a href="#Replacing-the-uppercase-Filter" class="headerlink" title="Replacing the uppercase Filter"></a>Replacing the <code>uppercase</code> Filter</h4><figure class="highlight js"><table><tr><td class="code"><pre><div class="line">text.toUpperCase()</div></pre></td></tr></table></figure>

<h4 id="Replacing-the-lowercase-Filter"><a href="#Replacing-the-lowercase-Filter" class="headerlink" title="Replacing the lowercase Filter"></a>Replacing the <code>lowercase</code> Filter</h4><figure class="highlight js"><table><tr><td class="code"><pre><div class="line">text.toLowerCase()</div></pre></td></tr></table></figure>

<h4 id="Replacing-the-pluralize-Filter"><a href="#Replacing-the-pluralize-Filter" class="headerlink" title="Replacing the pluralize Filter"></a>Replacing the <code>pluralize</code> Filter</h4><p>The <a href="https://www.npmjs.com/package/pluralize" target="_blank" rel="external">pluralize</a> package on NPM serves this purpose nicely, but if you only want to pluralize a specific word or want to have special output for cases like <code>0</code>, then you can also easily define your own pluralize functions. For example:</p>

<h4 id="Replacing-the-currency-Filter"><a href="#Replacing-the-currency-Filter" class="headerlink" title="Replacing the currency Filter"></a>Replacing the <code>currency</code> Filter</h4><p>For a very naive implementation, you could just do something like this:</p>

<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="string">'$'</span> + price.toFixed(<span class="number">2</span>)</div></pre></td></tr></table></figure>

<p>In many cases though, you’ll still run into strange behavior (e.g. <code>0.035.toFixed(2)</code> rounds up to <code>0.4</code>, but <code>0.045</code> rounds down to <code>0.4</code>). To work around these issues, you can use the <a href="http://openexchangerates.github.io/accounting.js/" target="_blank" rel="external"><code>accounting</code></a> library to more reliably format currencies.</p>

<p>As long as the referenced <code>assets</code> directory contains the <code>app.js</code> file we created earlier, as well as a <code>vue.js</code> file with Vue, we should now have a working single-page application!</p>

<p>Then to get it working with server-side rendering, there’s just one more step - the web server:</p>

<figure class="highlight js"><table><tr><td class="code"><pre><div class="line"><span class="comment">// server.js</span></div><div class="line"><span class="meta">'use strict'</span></div><div class="line"></div><div class="line"><span class="keyword">var</span> fs = <span class="built_in">require</span>(<span class="string">'fs'</span>)</div><div class="line"><span class="keyword">var</span> path = <span class="built_in">require</span>(<span class="string">'path'</span>)</div><div class="line"></div><div class="line"><span class="comment">// Define global Vue for server-side app.js</span></div><div class="line">global.Vue = <span class="built_in">require</span>(<span class="string">'vue'</span>)</div><div class="line"></div><div class="line"><span class="comment">// Get the HTML layout</span></div><div class="line"><span class="keyword">var</span> layout = fs.readFileSync(<span class="string">'./index.html'</span>, <span class="string">'utf8'</span>)</div><div class="line"></div><div class="line"><span class="comment">// Create a renderer</span></div><div class="line"><span class="keyword">var</span> renderer = <span class="built_in">require</span>(<span class="string">'vue-server-renderer'</span>).createRenderer()</div><div class="line"></div><div class="line"><span class="comment">// Create an express server</span></div><div class="line"><span class="keyword">var</span> express = <span class="built_in">require</span>(<span class="string">'express'</span>)</div><div class="line"><span class="keyword">var</span> server = express()</div><div class="line"></div><div class="line"><span class="comment">// Serve files from the assets directory</span></div><div class="line">server.use(<span class="string">'/assets'</span>, express.static(</div><div class="line"> path.resolve(__dirname, <span class="string">'assets'</span>)</div><div class="line">))</div><div class="line"></div><div class="line"><span class="comment">// Handle all GET requests</span></div><div class="line">server.get(<span class="string">'*'</span>, <span class="function"><span class="keyword">function</span> (<span class="params">request, response</span>) </span>&#123;</div><div class="line"> <span class="comment">// Render our Vue app to a string</span></div><div class="line"> renderer.renderToString(</div><div class="line"> <span class="comment">// Create an app instance</span></div><div class="line"> <span class="built_in">require</span>(<span class="string">'./assets/app'</span>)(),</div><div class="line"> <span class="comment">// Handle the rendered result</span></div><div class="line"> <span class="function"><span class="keyword">function</span> (<span class="params">error, html</span>) </span>&#123;</div><div class="line"> <span class="comment">// If an error occurred while rendering...</span></div><div class="line"> <span class="keyword">if</span> (error) &#123;</div><div class="line"> <span class="comment">// Log the error in the console</span></div><div class="line"> <span class="built_in">console</span>.error(error)</div><div class="line"> <span class="comment">// Tell the client something went wrong</span></div><div class="line"> <span class="keyword">return</span> response</div><div class="line"> .status(<span class="number">500</span>)</div><div class="line"> .send(<span class="string">'Server Error'</span>)</div><div class="line"> &#125;</div><div class="line"> <span class="comment">// Send the layout with the rendered app's HTML</span></div><div class="line"> response.send(layout.replace(<span class="string">'&lt;div id="app"&gt;&lt;/div&gt;'</span>, html))</div><div class="line"> &#125;</div><div class="line"> )</div><div class="line">&#125;)</div><div class="line"></div><div class="line"><span class="comment">// Listen on port 5000</span></div><div class="line">server.listen(<span class="number">5000</span>, <span class="function"><span class="keyword">function</span> (<span class="params">error</span>) </span>&#123;</div><div class="line"> <span class="keyword">if</span> (error) <span class="keyword">throw</span> error</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">'Server is running at localhost:5000'</span>)</div><div class="line">&#125;)</div></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span> <span class="attr">server-rendered</span>=<span class="string">"true"</span>&gt;</span>You have been here for 0 seconds&amp;period;<span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>

<p>instead of:</p>

<figure class="highlight html"><table><tr><td class="code"><pre><div class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"app"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span></div></pre></td></tr></table></figure>