nuxt.js

|| SOLVED || Add Vue directives in Nuxt (CLIENT side only)

由 与世无争的帅哥 提交于 2020-05-28 09:43:26
问题 How to add directives in nuxt: Note: this is only for client-side 1- /plugins/directives.js: import Vue from 'vue' Vue.directive('getelement', { bind(el, { value: { index, items } }) { el.addEventListener('click', (event) => { event.stopPropagation() console.log(el, index, items) // do whatever }) } }) 2- /nuxt.config.js plugins: [ ... // DIRECTIVES : client ONLY { src: '~/plugins/directives.js', mode: 'client' } ] 3- component.vue <img v-for="(item, index) in items" v-getelement="{ items,

Nuxt application returns 404 when dynamic routes are refreshed (Tomcat Server)

由 不打扰是莪最后的温柔 提交于 2020-05-27 05:56:10
问题 I'm doing the following: - Production Build: npm run generate - I copy the dist folder into the Tomcat Webapps, and it works fine - Whenever I refresh a dynamic route, it shows 404 URLs that work: https://ip:port/entryPath/dashboard/user URLs that don't work: https://ip:port/entryPath/dashboard/user/123 https://ip:port/entryPath/dashboard/user/123/settings https://ip:port/entryPath/dashboard/user/123/privacy I want to be able to share an URL such as: https://ip:port/entryPath/dashboard/user

Nuxt application returns 404 when dynamic routes are refreshed (Tomcat Server)

由 风格不统一 提交于 2020-05-27 05:55:44
问题 I'm doing the following: - Production Build: npm run generate - I copy the dist folder into the Tomcat Webapps, and it works fine - Whenever I refresh a dynamic route, it shows 404 URLs that work: https://ip:port/entryPath/dashboard/user URLs that don't work: https://ip:port/entryPath/dashboard/user/123 https://ip:port/entryPath/dashboard/user/123/settings https://ip:port/entryPath/dashboard/user/123/privacy I want to be able to share an URL such as: https://ip:port/entryPath/dashboard/user

Is there any way to use sass instead of node-sass (default for sass-loader) in Nuxt.js?

由 痞子三分冷 提交于 2020-05-18 04:30:09
问题 I'm trying to use sass package instead of node-sass in Nuxt.js. I found a config like this; // vue.config.js module.exports = { css: { loaderOptions: { sass: { implementation: require('sass'), // This line must in sass option }, }, } } but I couldn't figure out where to put this code in Nuxt.js. 回答1: Its already pointed on documentation. nuxt.config.js : build: { ... loaders: { sass: { implementation: require('sass') }, scss: { implementation: require('sass') } } ... } 来源： https:/

Nuxt Dynamic Routing on Firebase

由 扶醉桌前 提交于 2020-05-16 21:46:31
问题 My Nuxt.js App has this structure: /pages/index.vue /pages/_slug/index.vue When user gets /{any_page} , it will use the path to build the page content: /pages/_slug/index.vue <template> <div> {{slug}} </div> </template> <script> import fetch from 'isomorphic-fetch'; export default { async asyncData({ params }) { return { slug: params.slug } } } </script> This works perfectly when running the Nuxt App directly via yarn dev . When I try to run this using firebase functions: $ firebase serve -

Nuxt Dynamic Routing on Firebase

由 情到浓时终转凉″ 提交于 2020-05-16 21:45:49
问题 My Nuxt.js App has this structure: /pages/index.vue /pages/_slug/index.vue When user gets /{any_page} , it will use the path to build the page content: /pages/_slug/index.vue <template> <div> {{slug}} </div> </template> <script> import fetch from 'isomorphic-fetch'; export default { async asyncData({ params }) { return { slug: params.slug } } } </script> This works perfectly when running the Nuxt App directly via yarn dev . When I try to run this using firebase functions: $ firebase serve -

Nuxtjs Google Auth

由 廉价感情. 提交于 2020-05-16 04:35:09
问题 After calling $auth.loginWith('google'), I am getting http://localhost:3000/ru/user-registration#state=D7xooLsNNxNGfbvcQMU5g&access_token=ya29.a0Ae4lvC2z0XERgeRUipmu7c205WWCCSVgRZ-s_mYWg6ZoMgCGzVZ-U69arfpn-ybm5kthqtvqQrD7lGYmNDqiLtkW1aIecP6Wp-bwINMok3ztNcW5KwmlohLmtnbk4IZVkciKfb8T_JUtf89xpJcjpt2dSx_09FPGSKc&token_type=Bearer&expires_in=3599&scope=email%20profile%20openid%20https://www.googleapis.com/auth/userinfo.email%20https://www.googleapis.com/auth/userinfo.profile&authuser=0&prompt

How to embed font to all page with nuxt js

由 时光毁灭记忆、已成空白 提交于 2020-05-08 11:18:28
问题 I just embed google font to the global setting in nuxt.config.js link: [ { rel: 'stylesheet', href: 'https://fonts.googleapis.com/css?family=Roboto' } ] But how to apply this font to every page . 回答1: If you want to include the font within your app so you're serving it Download the font from: https://fonts.google.com/specimen/Roboto?selection.family=Roboto (Open the drawer and download the .zip file). Unpack the contents of the .zip into ./assets/fonts/* (create it if it does not exist).

Next.js和Nuxt.js的语法比较

由 …衆ロ難τιáo~ 提交于 2020-05-06 23:05:39
React.js和Vue.js都是很好的框架。而且Next.js和Nuxt.js甚至将它们带入了一个新的高度，这有助于我们以更少的配置和更好的可维护性来创建应用程序。但是，如果你必须经常在框架之间切换，在深入探讨另一个框架之后，你可能会轻易忘记另一个框架中的语法。在本文中，我总结了这些框架的基本语法和方案，然后并排列出。我希望这可以帮助我们尽快掌握语法。 上一篇文章： React.js和Vue.js的语法并列比较 Assets Next.js /* |- public/ |-- my-image.png */ function MyImage ( ) { return < img src = "/my-image.png" alt = "my image" /> ; } 复制代码 Nuxt.js assets，默认情况下，Nuxt使用vue-loader、file-loader和url-loader来提供强大的assets服务。 <!-- |- assets/ |- image.png --> < img src = "~/assets/image.png" alt = "image" /> 复制代码 static，自动服务 <!-- |- static/ |- image.png --> < img src = "/image.png" alt = "image" /> 复制代码

React.js和Vue.js的语法并列比较

由 寵の児 提交于 2020-05-05 17:59:25
React.js和Vue.js都是很好的框架。而且Next.js和Nuxt.js甚至将它们带入了一个新的高度，这有助于我们以更少的配置和更好的可维护性来创建应用程序。但是，如果你必须经常在框架之间切换，在深入探讨另一个框架之后，你可能会轻易忘记另一个框架中的语法。在本文中，我总结了这些框架的基本语法和方案，然后并排列出。我希望这可以帮助我们尽快掌握语法，不过限于篇幅，这篇文章只 比较React.js和Vue.js ，下一篇再谈Next.js个Nuxt.js。 Github： github.com/oahehc/reac… Render React.js ReactDOM.render( < App /> , document.getElementById("root")); 复制代码 Vue.js new Vue({ render : ( h ) => h(App), }).$mount( "#root" ); 复制代码 基本组件 React.js Class component class MyReactComponent extends React . Component { render() { return < h1 > Hello world </ h1 > ; } } 复制代码 Function component function MyReactComponent (
订阅 nuxt.js