How to configure runtime compilation in Vue and Snowpack - javascript

I'm trying to get a Vue project setup with runtime compilation, but I'm not quite sure how to configure this in Snowpack.
Basically currently when I run the project I get a blank screen and the usual "[Vue warn]: Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".
Currently my files look like below:
snowpack.config.js:
/** #type {import("snowpack").SnowpackUserConfig } */
module.exports = {
mount: {
public: '/',
src: '/_dist_',
},
plugins: [
'#snowpack/plugin-vue',
'#snowpack/plugin-dotenv'
],
...
}
index.js:
import { createApp } from "vue";
// import App from "./App.vue";
import First from "./First.vue";
// const app = createApp(App);
const app = createApp({
data() {
return {
message: 'duck',
}
}
});
app.component('first', First);
app.component('ducks', {
props: ['todo'],
template: '<li>{{ todo }}</li>'
});
app.mount("#app");
// Hot Module Replacement (HMR) - Remove this snippet to remove HMR.
// Learn more: https://www.snowpack.dev/#hot-module-replacement
if (import.meta.hot) {
import.meta.hot.accept();
import.meta.hot.dispose(() => {
app.unmount();
});
}
index.html:
...
<body>
<div id="app">
<p>stuff should be fine:</p>
<p>{{message}}</p>
<ul>
<li>hello</li>
<ducks todo="testing"></ducks>
<ducks todo="goats"></ducks>
<ducks todo="canoes"></ducks>
</ul>
</div>
<noscript>You need to enable JavaScript to run this app.</noscript>
<script type="module" src="/_dist_/index.js"></script>
</body>
...
I've tried adding an alias but that doesn't seem to do anything:
snowpack.config.js
module.exports = {
...
plugins: [
'#snowpack/plugin-vue',
'#snowpack/plugin-dotenv'
]
...
alias: {
'vue': 'vue/dist/vue.esm-bundler.js'
}
Anybody know how I can get runtime compilation setup?
Thanks,
Matt

I managed to fix this, by using import { createApp, h } from "vue/dist/vue.cjs.prod.js";.
But I'm not sure if this will create other issues in the future.

Related

Cannot use import statement outside a module using nuxtjs

I am trying to use vue-agile carousel, I can install and get it to run without any issues right after i install it, i am using NUXT, but after restarting my server i keep getting this error and can not find any solution for it
<template>
<div>
<agile>
<div class="slide">
<img src="/img/img2.jpg" alt="" />
</div>
<div class="slide">
<img src="/img/img1.jpg" alt="" />
</div>
</agile>
</div>
</template>
<script >
import { VueAgile } from "vue-agile";
export default {
name: "",
layout: "",
middleware: [],
data() {
return {};
},
components: {
agile: VueAgile,
},
};
</script>
Did you checked the documentation about how to use this plugin in Nuxt instead of a regular Vue?
plugins/vue-agile.js
import Vue from 'vue'
import VueAgile from 'vue-agile'
Vue.use(VueAgile)
nuxt.config.js
export default {
plugins: ['~/plugins/vue-agile', mode: 'client']
}
To use component without SSR use the client-only component:
<client-only placeholder="Loading...">
<agile>...</agile>
</client-only>
EDIT: Add Shreerang's suggestion (comment below).
Sergio's answer above is mostly accurate, but needs a small tweek.
The nuxt.config.json config needs the following update. No build config is required.
plugins: [
{ src: '~/plugins/vue-agile', mode: 'client' }
]
You need to mark vue-agile to be transpiled in order to work on the server part (SSR).
nuxt.config.js :
...
build: {
transpile: [/vue-agile/]
}
...
from official Nuxt.js docs, they said.
If you get an Cannot use import statement outside a module error, you
may need to add your package to the build > transpile option in
nuxt.config.js for webpack loader to make your plugin available.
Example
module.exports = {
build: {
transpile: ['vue-agile']
}
}
Add type="module" in your script tag
<script type="module">
import { VueAgile } from "vue-agile";
export default {
name: "",
layout: "",
middleware: [],
data() {
return {};
},
components: {
agile: VueAgile,
},
};
</script>

nuxt.js document is not defined, problem with pugin

I added plugin: vue-burger-menu to my nuxt.js project. And i have an error: "document is not defined". I know, that this plugin is available only for client-side. So I found in vue documentation enter link description here what I have to do to fix it. It works only for first refresh. Then I have again document is not defined.
nuxt.config.js:
build: {
vendor: ['vue-burger-menu'],
}
plugins: [
{ src: '~/plugins/vue-burger-menu.js', ssr: false }
],
Add a file to my plugins folder called "vue-burger-menu.js":
import Vue from 'vue';
import VueBurgerMenu from 'vue-burger-menu';
if (process.browser) {
Vue.use(VueBurgerMenu);
}
nav template
<template lang="pug">
Slide(right)
nav.menu_vertical
</template>
<script>
import { Slide } from 'vue-burger-menu'
export default {
name: 'Nav',
components: {
Slide
},
}
Replace deprecated process.browser with process.client
if (process.client) {
Vue.use(VueBurgerMenu);
}
Nuxt is doing SSR and document is only available in browser so you need to wrap your plugin code like
change "vue-burger-menu.js" as following
import Vue from 'vue';
import VueBurgerMenu from 'vue-burger-menu';
if (process.browser) {
Vue.use(VueBurgerMenu);
}
you can find detail documentation Here

Unexpected undefined while import with Webpack

I have a problem that has never happened to me before: I'm compiling a little basic starter browser web app (with React) using Webpack + Babel 7.
I've got three different file:
withAuth.js The Auth High Order Component
NavBar.js The NavBar Component
Login.js The Login Form
If I import the withAuth HOC in the NavBar is everything alright, but if I import the withAuth component in the Login.js file it return undefined
/** withAuth.js */
console.log('withAuth Loaded');
const withAuth = Child => ChildProps => (
<AuthContext.Consumer>
{ authClient => <Child {...ChildProps} authClient={authClient} }
</AuthContext.Consumer>
)
export { withAuth };
/** NavBar.js */
import { withAuth } from 'HOC/Auth';
console.log('NavBar Loaded', withAuth); // <- My HOC
const NavBarComponent = (authClient) => { /* ... My Code ... */ }
const NavBar = withAuth(NavBarComponent);
export default NavBar;
/** Login.js */
import { withAuth } from 'HOC/Auth';
console.log('Login Loaded', withAuth); // <- undefined ??
const LoginFormComponent = (authClient) => { /* ... My Code ... */ }
const LoginForm = withAuth(LoginFormComponent);
// /|\
// |
// Will produce an Error, withAuth is Undefined
This is my Webpack Configuration:
/** webpack.config.js */
module.exports = {
entry: { core: 'index.js' },
resolve: {
alias: {
HOC: './path/to/hoc/folder'
}
},
optimization: {
runtimeChunk: 'single',
splitChunks: {
chunks: 'all'
}
},
plugins: [ /* Various Plugin */ ],
module: {
rules: [ /* My Rules */ ]
}
}
Any one know why my HOC is undefined?
Edit:
I've placed Console Log in the tree file. The result are:
'Login Loaded' - undefined
'withAuth Loaded'
'NavBar Loaded' - function() { }
Edit 2:
This is the files structure:
app/
|-high-order-component/
| |-auth/
| |-withAuth.js
|
|-layout-component/
| |-navbar/
| |-index.js
|
|-pages/
|-auth/
|-login.js
Resolved
After much testing and research throughout the afternoon I came to the solution of the problem. As I said in the question, mine is a larger project and I only partially wrote its structure because I thought the problem was located in those three files.
In reality, the problem was a Circular Dependency problem and not a Webpack configuration problem.
In my project I have a module called 'Route' that store all Path and all Component for Path, so I can build the React Router using Array Map function. That module has a function that allow me to Route through path and that can return me a path string to a Component.
My problem was due to the fact that this module is often called in the project and this has created a Circular Dependency.
Webpack doesn't show the Circular Dependency during compiling, but I found useful adding a plugin, called CircualDependencyPlugin. This plugin will break Webpack compiling when a Circual Dependency will be found.
Splitting the Route module into two files solved my problem.

How to Install Vue Packages in nuxt.js

I'm trying to install Vue Typer in my Nuxt js app but no luck. I keep getting "document not defined". I tried importing it in my nuxt.config.js as a plugin but it doesn't work.
I got it working in my VueCLI 3, seems to work fine with this method.
Appreciate it!
Getting
NuxtServerError render function or template not defined in component: anonymous
////plugins///
import Vue from vue;
if (process.client) {
const VueTyper = require('vue-typer');
Vue.use(VueTyper);
}
///nuxt.config.js///
plugins: [
{src: '~/plugins/vue-typer.js', ssr: false}
],
<template>
<vue-typer text='Hello World! I was registered locally!'></vue-typer>
</template>
<script>
const VueTyper = processs.client ? require('vue-typer'): '';
export default {
components: {
VueTyper
}
}
</script>
To fix this, create a file called vueTyper.client.js under plugin folder then type this;
import Vue from 'vue';
import { VueTyper } from 'vue-typer';
Vue.component('vue-typer', VueTyper);
then in your nuxt.config.js add this to your plugin
plugins: [
{src: '~/plugins/vueTyper.client.js', mode: 'client',}
]
after doing this you can easily use it anywhere in your application without error:
<vue-typer text='Hello World! I was registered locally!'></vue-typer>

How to use external html templates in Components with Vue.js 2.0 in Laravel 5.3

I am using the default Laravel 5.3 setup - a fresh install with default configuration for Vue.js 2.0.
With Laravel 5.1 and Vue.js 1.x, I could easily define components like and used browserify to compile.
Vue.component('test-component', require('./test-component');
/* test-component.js */
export default{
template:require('./test-component.template.html')
}
/* test-component.template.html */
<div class="test-component">
<h1> Test Component <h1>
</div>
However, with Vue 2, the default is webpack (although browserify is also available but could not get it working and webpack seems better). But I am not able to get the configuration working.
I have tried various configurations, finally I have this in my gulp.js file
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
var config = {
module:{
loaders:[
{
test: /\.html$/,
loader: 'vue-loader'
}
]
}
};
elixir(mix => {
mix.sass('app.scss')
.webpack('app.js',null, null, config);
});
Now I am not getting any errors while compiling gulp webpack however when I try to view the page in the browser, it doesn't show the component and has an error/warn in the console
vue.js?3de6:513[Vue warn]: invalid template option:[object Object]
(found in component <test>)
vue.js?3de6:4085Uncaught TypeError: Cannot read property 'child' of null(…)
My app.js main entry file (default provided by Laravel)
require('./bootstrap');
Vue.component('test-component', require('./components/test-component'));
const app = new Vue({
//el: '#app',
}).$mount('#app');
What am I missing? Any pointers would be appreciated.
You have to use html-loader instead of vue-loader.
npm install html-loader --save-dev
Your gulpfile.js (need to change the loader):
const config = {
module: {
loaders:[{
test: /\.html$/,
loader: 'html'
}]
}
};
elixir((mix) => {
mix.sass('app.scss')
.webpack('app.js', null, null, config);
});
Your test-component.js (no changes, you're good to go):
export default {
template: require('./test-component.template.html')
}
Your test-component-template.html: (no changes, you're good to go)
<div class="test-component">
<h1>Test Component Goes Here</h1>
</div>
Important
Here's how to define your component:
Using Default
Vue.component('test-component', require('./test-component').default);
Or, simply use ES2015 import
import TestComponent from './test-component';
Vue.component('test-component', TestComponent);
Try this in your gulp file:
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
elixir(mix => {
mix.webpack('app.js');
});
And import your components like this:
import Test from './Components/Test.vue';
Vue.component('test', Test);

Categories

Resources